Centrar a y button en la misma línea

Damoc · #1 (**permalink**) 09/11/2010, 09:52

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...

kseso? · #2 (**permalink**) 09/11/2010, 10:48

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<!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>
.botones {
width: 210px;
height: 30px;
overflow: hidden;
border: 1px solid #444;
}
.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;
    color: #fff;
}
 
.boton:hover {
    background-color: #058;
    color: #058;
}
 
.link {
    display: block
    height: 30px;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    width: 98px;
    float: left;
}
form {display: inline; float: right;}
</style>
</head>
 
<body>
<div class="botones">
    <a href="" class="boton link">Cancelar</a>
    <form name="enviar" method="post">
        <button type="submit" name="siguiente" class="boton" value="">Siguiente</button>
    </form>
</div>
</body>
</html>

Damoc · #3 (**permalink**) 09/11/2010, 13:23

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!

dargorg · #4 (**permalink**) 09/11/2010, 17:45

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.botones {
    height: 30px;
    overflow: hidden;
    border: 1px solid #444;
    text-align: center;
}

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.

Damoc · #5 (**permalink**) 09/11/2010, 18:55

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!

kseso? · #6 (**permalink**) 10/11/2010, 06:41

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.

Damoc · #7 (**permalink**) 10/11/2010, 09:09

Gracias kseso?!

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

Saludos... y gracias de nuevo!