alinear boton/enlace enviar

estorde · #1 (**permalink**) 24/02/2008, 13:38

Buenas,

Aqui os dejo el código con el que me estoy peleando desde hace días:

Código:

<html>
<head>
	<title>Prueba</title>
</head>
<body>
	<form action="" method="" id="buy_billetes">
		<p class="fechas">
			<input type="text" value="fecha de ida" name="fecha_ida" id="fecha_ida"/>
			<a href="" title="Escoge fecha de salida"><img src="img/calendar.gif" title="Calendario para escoger fechas"/></a>
			<input type="text" value="fecha de vuelta" name="fecha_vuelta" id="fecha_vuelta"/>
			<input type="image" src="img/calendar.gif" name="calendar" id="fecha_vuelta_calendar"/>	
		</p>
	</form>
</body>
</html>

El problema surge cuando no logro de ninguna manera alinear estos elementos en el eje vertical (que queden todos a la misma altura) He probado a aplicar numerosos estilos, jugando con line-height, height; padding; margin, etc en todos los elementos.

En el código podeis apreciar además que para insertar "la típica imagen del calendario" para escoger fechas, he probado incluso a insertarla como img dentro de un a, e incluso como un

Código:

input type="image"

.

Alguine podría ayudarme a escoger la mejor manera de solucionar este problema que ocurre tanto en Explorer como en Firefox??

Mi millones de gracias ed antemano.

estorde · #2 (**permalink**) 24/02/2008, 14:10

Buscando alternativas, he dado con una solución (aunque podría mejorarse) gracias a la lista de distribución de Ovillo.

Aqui os dejo la respuesta:

Como simpre la solucion es la mas simple, y uno no la ve

la solucion para alinear la imagen con el input text es usando el
atributo de la imagen align, o en su defecto usando en css el atributo
vertical-align:middle, por defecto este valor esta en top y sus otro
valor es bottom.

sin embargo la alineacion no es perfecta. esto se puede mejorar???

Seguiré buscando la manera de posicionarlo mejor todavía.... alguien sabe la manera??

Perr0 · #3 (**permalink**) 23/08/2008, 16:30

Hola, mira a mi me dio resultado haciendo un css para la imagen:

.imagen_despues_de_un_input_text{
vertical-align: bottom !important;
vertical-align: text-bottom;
}

el important es para que se cuadre en Firefox

salu2