Foros del Web » Creando para Internet » CSS »

vertical-align???

Estas en el tema de vertical-align??? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/04/2005, 16:37
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
vertical-align???

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..
__________________
In a world without walls, who needs Windows?
  #2 (permalink)  
Antiguo 09/04/2005, 16:38
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
vertical-align???

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..
__________________
In a world without walls, who needs Windows?
  #3 (permalink)  
Antiguo 09/04/2005, 18:06
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Bueno ,si no va nada mas dentro del div ,puedes ponerle:
margin:25% 0;
Mira a ver si te sirve.
  #4 (permalink)  
Antiguo 09/04/2005, 18:15
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
no sirvio... de hecho, me descuadro el diseño...
__________________
In a world without walls, who needs Windows?
  #5 (permalink)  
Antiguo 09/04/2005, 20:35
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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.
__________________
QMD...
  #6 (permalink)  
Antiguo 09/04/2005, 20:47
n2h
 
Fecha de Ingreso: octubre-2004
Mensajes: 163
Antigüedad: 13 años, 1 mes
Puntos: 0
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 :).
  #7 (permalink)  
Antiguo 10/04/2005, 04:10
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Tema trasladado al foro de css desde (x)html
  #8 (permalink)  
Antiguo 10/04/2005, 04:41
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Temas duplicados unidos

por favor, no dupliquen la misma pregunta en distintos foros
  #9 (permalink)  
Antiguo 10/04/2005, 17:00
 
Fecha de Ingreso: septiembre-2003
Ubicación: Pirexia
Mensajes: 150
Antigüedad: 14 años, 2 meses
Puntos: 1
Cita:
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
__________________
In a world without walls, who needs Windows?
  #10 (permalink)  
Antiguo 01/09/2006, 10:15
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Cita:
Iniciado por Volrath Ver Mensaje
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?
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 11:40.