Foros del Web » Creando para Internet » CSS »

Centrar a y button en la misma línea

Estas en el tema de Centrar a y button en la misma línea en el foro de CSS en Foros del Web. Buenas... Haciendo un par de pruebas me encontré con el siguiente problema... Necesito que estos dos elementos (a y button) se muestren uno al lado ...
  #1 (permalink)  
Antiguo 09/11/2010, 09:52
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Pregunta Centrar a y button en la misma línea

Buenas...

Haciendo un par de pruebas me encontré con el siguiente problema...

Necesito que estos dos elementos (a y button) se muestren uno al lado del otro y centrados horizontalmente:

Código:
<a href="" class="boton link">Cancelar</a>
<form name="enviar" method="post">
	<button type="submit" name="siguiente" class="boton" value="">Siguiente</button>
</form>
Logré ponerlos uno al lado del otro usando float, pero no he podido centrarlos...

¿Alguien sabe cómo hacerlo? Ya he probado de todo sin resultados...

Les dejo el código completo:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>
<style>
.boton {
	background-color: #036;
	background-image: url(imagenes/gradiente.png);
	border: 1px solid #036;
	color: #036;
	cursor: pointer;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	margin: 0 2px 0 2px;
	text-transform: uppercase;
	width: 100px;
}

.boton:hover {
	background-color: #058;
	color: #058;
}

.link {
	display: block;
	height: 28px;
	line-height: 28px;
	text-align: center;
	text-decoration: none;
	width: 98px;
}
</style>
</head>

<body>
	<a href="" class="boton link">Cancelar</a>
	<form name="enviar" method="post">
		<button type="submit" name="siguiente" class="boton" value="">Siguiente</button>
	</form>
</body>
</html>
Agradecería cualquier idea al respecto...
  #2 (permalink)  
Antiguo 09/11/2010, 10:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar a y button en la misma línea

Pruebe lo siguiente. No está optimizado y debería pulir o afinar alguna cosilla, en función del resto de elementos.
El borde de 1px es sólo a efectos visuales.
Código CSS:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Prueba</title>
  6. <style>
  7. .botones {
  8. width: 210px;
  9. height: 30px;
  10. overflow: hidden;
  11. border: 1px solid #444;
  12. }
  13. .boton {
  14.     background-color: #036;
  15.     background-image: url(imagenes/gradiente.png);
  16.     border: 1px solid #036;
  17.     color: #036;
  18.     cursor: pointer;
  19.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  20.     font-size: 14px;
  21.     font-weight: bold;
  22.     height: 30px;
  23.     margin: 0 2px 0 2px;
  24.     text-transform: uppercase;
  25.     width: 100px;
  26.     color: #fff;
  27. }
  28.  
  29. .boton:hover {
  30.     background-color: #058;
  31.     color: #058;
  32. }
  33.  
  34. .link {
  35.     display: block
  36.     height: 30px;
  37.     line-height: 28px;
  38.     text-align: center;
  39.     text-decoration: none;
  40.     width: 98px;
  41.     float: left;
  42. }
  43. form {display: inline; float: right;}
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <div class="botones">
  49.     <a href="" class="boton link">Cancelar</a>
  50.     <form name="enviar" method="post">
  51.         <button type="submit" name="siguiente" class="boton" value="">Siguiente</button>
  52.     </form>
  53. </div>
  54. </body>
  55. </html>
  #3 (permalink)  
Antiguo 09/11/2010, 13:23
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Centrar a y button en la misma línea

Gracias! Tan solo agregando un 'margin: auto' a la clase .botones obtuve lo que quería...

Una pregunta más...

Solo se centran los botones con 'margin: auto' definiendo un ancho fijo en la clase .botones (210px en este caso).

En algunas páginas voy a mostrar más de dos botones y ya que supero ese ancho, los botones empiezan a mostrarse en dos líneas...

Hay alguna manera de centrar <div class="botones"> sin definir ese ancho fijo?

O voy a tener que crear estilos con distintos anchos y aplicarlos según la cantidad de botones que muestre?

De ser posible quisiera evitar esto último y que la cosa funcione cualquiera sea la cantidad de botones... alguna idea de cómo lograrlo?

Gracias de nuevo por la ayuda!
  #4 (permalink)  
Antiguo 09/11/2010, 17:45
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Centrar a y button en la misma línea

Mira, yo te recomendaría que quitaras el ancho del div botones, y que pongas text-align: center, y así se te ajusta todo como tu quieres, siendo el div botones de ancho variable.

Te ilustro con código:
Código CSS:
Ver original
  1. .botones {
  2.     height: 30px;
  3.     overflow: hidden;
  4.     border: 1px solid #444;
  5.     text-align: center;
  6. }

De esta forma no deberías tener ningún problema, aunque quizás sería conveniente que quitaras el float left del link, porque te podría dar problemas en algunos navegadores... Ya que no hace falta porque se verá a la izquierda y el formulario a la derecha.

Un saludo y ya me comentas.
  #5 (permalink)  
Antiguo 09/11/2010, 18:55
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Centrar a y button en la misma línea

Hola dargorg!

Ya había probado lo que me propones, pero como dices, con text-align se centra solo el button, quedando el link pegado al borde izquierdo...

Si se centraran los dos elementos, sería la solución perfecta!

Lo que necesito es que quede todo junto, como si fueran parte de un mismo menú (por eso hice los estilos para que se vean iguales), y a su vez, todo ese menú centrado...

Con margin: auto logro lo que deseo, pero tengo el problema del ancho fijo que mencione más arriba y que impide que pueda seguir agregando botones a mi menú sin mayores complicaciones...

Gracias por la respuesta!
  #6 (permalink)  
Antiguo 10/11/2010, 06:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar a y button en la misma línea

Damoc:
Lo del centrado se me escapó. Ni me di cuenta que era parte de la consulta.

Sobre el nuevo planteamiento:
Hay que procurar ofrecer toda la info necesaria al plantear las consultas, pues aunque a priori pudiesen parecer intrascendentes, suelen ser casi imprescindibles.

Un poco de teoría:
El centrado simultáneo de un nº variable de elementos y desconocidos a la hora del planteamiento suele ser algo más complicado de lo que parece.

En estos momentos no tengo tiempo de armar un ejemplo con sus particularidades (un enlace más form con nº desconocido de buttons).
Pero creo que este ejemplo podría aplicarse, con las modificaciones oportunas: http://bit.ly/bxwBRc

Recuerde que el form es un elemento de bloque y puede alojar en su interior otras etiquetas.

Ya dirá si lo logra partiendo del ejemplo enlazado o si lo retomamos.
  #7 (permalink)  
Antiguo 10/11/2010, 09:09
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Centrar a y button en la misma línea

Gracias kseso?!

Ese link me solucionó el problema a la perfección y de manera muy sencilla.

Saludos... y gracias de nuevo!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:00.