vertical-align???

[Volrath]

Estoy tratando de cuadrar un centro que kede en el centro total de una caja ke mide 500x500px, kiero ke kede tanto en el medio horizontalmente como verticalmente, para esto use text-align:center y vertical-align: middle, teóricamente me deberia funcionar, pero nose porke no funciona, ni en ie ni en firefox... aki esta el codigo:

Código:

div.t1 {
			background: #ff9900 url("images/bgt1.png") top center no-repeat;
			padding: 0px;
			margin: 0px;
			text-align: center;
			vertical-align: middle;
			color: #FFF;
			font-size: 11px;
			font-weight: bold;
			height: 25px;
		}

y el html es sencillo:

Código:

<div class="t1">algo</div>

Alguien que me pueda hechar una mano por favor..

[Volrath]

Estoy tratando de cuadrar un centro que kede en el centro total de una caja ke mide 500x500px, kiero ke kede tanto en el medio horizontalmente como verticalmente, para esto use text-align:center y vertical-align: middle, teóricamente me deberia funcionar, pero nose porke no funciona, ni en ie ni en firefox... aki esta el codigo:

Código:

div.t1 {
			background: #ff9900 url("images/bgt1.png") top center no-repeat;
			padding: 0px;
			margin: 0px;
			text-align: center;
			vertical-align: middle;
			color: #FFF;
			font-size: 11px;
			font-weight: bold;
			height: 25px;
		}

y el html es sencillo:

Código:

<div class="t1">algo</div>

Alguien que me pueda hechar una mano por favor..

[programeitor]

Bueno ,si no va nada mas dentro del div ,puedes ponerle:
margin:25% 0;
Mira a ver si te sirve.

[Volrath]

no sirvio... de hecho, me descuadro el diseño...

[orochies]

Lo que pasa que el code vertical-align solo funciona si el alto de la linea esta definido con line-height.

Por ejemplo tienes un div de 200px cuadrados (ancho y alto) y quieres que se centre tu texto (HOLA) tanto Vertical como Horizontal, solo tendras que aplicarle este code a la linea del div osea linea-height: 100px;

Ten en cuenta que la altura de la linea lo podras aplicar a cualquier elemento en cambio el vertical-align solo a los elementos de linea, es preferible que le apliques las dos propiedades a los de linea y no a los elementos a nivel de bloque.

Para no agoviarte tanto checa esta especificación:

http://www.sidar.org/recur/desdi/tra...ml#line-height

Y si no sabes que son los elementos a nivel de bloque y de Linea Esta otra Url:

Elementos de Bloque:

http://www.sidar.org/recur/desdi/tra...isuren.html#q5

Elementos de Linea:

http://www.sidar.org/recur/desdi/tra...isuren.html#q7

_Saludos.

[n2h]

Ahh hace algun tiempo en ala habia visto un funcionamiento para esto. La logica era la siguiente:

Dos divs, uno superior y otro inferior que tienen ambos height:50%.

Entre ambos divs, insertas un tercero que si supongamos tiene 500px, como es tu caso, le das margin-top:-250px, y ya ta, va a estar debajo del div de 50% de height, y elevado en 250px que es la mitad de su altura total ;)

Espero que lo hayas entendido :).

[tunait]

Tema trasladado al foro de css desde (x)html

[tunait]

Temas duplicados unidos

por favor, no dupliquen la misma pregunta en distintos foros

[Volrath]

Iniciado por orochies

Lo que pasa que el code vertical-align solo funciona si el alto de la linea esta definido con line-height.

Por ejemplo tienes un div de 200px cuadrados (ancho y alto) y quieres que se centre tu texto (HOLA) tanto Vertical como Horizontal, solo tendras que aplicarle este code a la linea del div osea linea-height: 100px;

Ten en cuenta que la altura de la linea lo podras aplicar a cualquier elemento en cambio el vertical-align solo a los elementos de linea, es preferible que le apliques las dos propiedades a los de linea y no a los elementos a nivel de bloque.

Para no agoviarte tanto checa esta especificación:

http://www.sidar.org/recur/desdi/tra...ml#line-height

Y si no sabes que son los elementos a nivel de bloque y de Linea Esta otra Url:

Elementos de Bloque:

http://www.sidar.org/recur/desdi/tra...isuren.html#q5

Elementos de Linea:

http://www.sidar.org/recur/desdi/tra...isuren.html#q7

_Saludos.

Sirvio a la perfeccion... gracias

[zsamer]

Iniciado por Volrath

Sirvio a la perfeccion... gracias

sólo funciona cuando se trata de una sola linea de texto pero que pasa si tengo, varias lineas de texto?

como logro alinear verticalmente un parrafo completo de texto?