Foros del Web » Creando para Internet » CSS »

vertical-align: middle

Estas en el tema de vertical-align: middle en el foro de CSS en Foros del Web. Código: div style="width: 100%; height: 30px; background-image: url(Images/FondoTituloBloque.jpg); vertical-align: middle"> &nbsp;<img src="Images/PuntoTituloBloque.gif" alt="Punto" style="vertical-align: middle;" /> <span class="TextoNormal" style="font-weight: bold;">Enlaces de inter&eacute;s</span> </div> Me muestra ...
  #1 (permalink)  
Antiguo 06/07/2006, 07:00
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
vertical-align: middle

Código:
div style="width: 100%; height: 30px; background-image: url(Images/FondoTituloBloque.jpg); vertical-align: middle">
        &nbsp;<img src="Images/PuntoTituloBloque.gif" alt="Punto" style="vertical-align: middle;" />
        <span class="TextoNormal" style="font-weight: bold;">Enlaces de inter&eacute;s</span>
    </div>
Me muestra el contenido enganchado al nivel superior de la DIV, en vez de centrarlo verticalmente.
__________________
..:: moNTeZIon ::..
  #2 (permalink)  
Antiguo 06/07/2006, 11:54
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Disculpen haber incrustado tanto código. Lo dejo con este más simplificado que me ocurre lo mismo:
Código:
<div style="width: 988px; height: 40px; vertical-align: middle; border: 1px solid #000000;">
    <span class="TextoNormal" style="font-weight: bold;">Enlaces de interes</span>
</div>
No debería alinear el texto en medio del DIV (verticalmente, claro) ?? Aparece pegado al borde de arriba dejando mucho espacio por debajo..
Gracias por las opiniones.
Saludos.
__________________
..:: moNTeZIon ::..
  #3 (permalink)  
Antiguo 06/07/2006, 13:03
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola Avatar de moNTeZIon

vertical-align solo se aplica a los elementos en linea o celdas de tablas.
http://www.sidar.org/recur/desdi/tra...vertical-align
__________________
Mis comentarios quieren decir lo que dicen, esto es: lo que está escrito. Lo que tú imagines que he dicho o he querido decir es problema tuyo.
  #4 (permalink)  
Antiguo 06/07/2006, 16:23
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
esto jamas lo voy a entender, no hay algun ejemplo de vertical-align que no sea en tablas? no se supone que los elementos de linea se ajustan al contenido automaticamente y su ancho y alto no pueden ser alterados?? entonces para que sirve??
__________________
Internet Explorer SuckS
Download FireFox
  #5 (permalink)  
Antiguo 07/07/2006, 06:25
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Hola Jorolo sin Avatar!
Tengo entendido que puedo convertir un DIV de bloque (por defecto display: block) en un "inline" (display: inline). Es entonces que si me hará caso con el vertical-align: middle? A eso te refieres?
Porqué si acaba siendo como dice SiR.CARAJODIDA, solo se puede usar con Tables, volvemos a estar en la misma coña.
A parte, he visto formas de centrar el contenido de un DIV con métodos como numeros negativos en el margin o el padding o cosas así que todavía me gustan menos.
Saludos y gracias por las opiniones.
__________________
..:: moNTeZIon ::..
  #6 (permalink)  
Antiguo 07/07/2006, 08:18
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
ahora mismo no te se decir exactamente si funciona o no lo siguiente, pero se debería conseguir usando display:table; y/o display:table-cell;

Una forma sería una capa contenedora con el display:table; y otra capa dentro de esta con la propiedad display:table-cell; y vertical-align:middle;

Salu2
  #7 (permalink)  
Antiguo 07/07/2006, 09:45
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 13 años, 5 meses
Puntos: 53
para centrarla verticalmente y horizontalmente, esto es suficiente:

Código:
div#Centrada{ 
   position:absolute; 
   top:50%; 
   left:50%; 
   width:500px; 
   height:300px; 
   margin-left:-250px; 
   margin-top:-150px; 
}
que esta sucediendo?? primero indicamos que el top y el lef esten en el centro, ahora, necesitamos restarle a esto la mitad de las dimenciones de la capa, en este caso el width es 500, la mitad de esto es 250, la cual se la restamos en el margen izquierdo, hacemos lo mismo para el top.

have funnnnn!!
  #8 (permalink)  
Antiguo 07/07/2006, 09:52
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Joder! con perdón.
Primero de todo gracias all-ill. Esto ya se parece más a una solución css.
Ha funcionado. Pero vamos a ver. Yo le pongo un DIV con display: table , y dentro de este (el que yo ya tenia) pero con display: table-cell
Parece como que le estemos diciendo a los DIVs que se comporten como tablas.

Me gustaría saber un motivo por el que "es mejor", "se recomienda"... esta práctica, en vez de utilizar una tabla con su celda? Porqué las tablas no están quedando obsoletas verdad? o si...

Y también, muy importante, eso no funciona en explorer. Sigue dejando el texto arriba. En cambio firefox ya lo centra. Alguna solución para Explorer?

Saludos a todos.
__________________
..:: moNTeZIon ::..

Última edición por moNTeZIon; 07/07/2006 a las 10:29
  #9 (permalink)  
Antiguo 07/07/2006, 09:56
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Hola stock,
Hemos respondido a la vez, jeje
Mira, esa era precisamente la forma que no me convencía.
Primero que el position: absolute no lo quiero, porqué mis DIVs (en este caso) están con position: relative
Segundo que yo quiero decirle que "se centre el contenido", y no tener que calcular las medidas cada vez que haga un cambio para que quede completamente centrado.
En fin, estas son mis inquietudes ahora mismito. Si alguien puede responderme un poco constructivamente la pregunta del anterior post, me haria un gran favor.
Saludos!
__________________
..:: moNTeZIon ::..
  #10 (permalink)  
Antiguo 28/10/2011, 19:52
 
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: vertical-align: middle

Hola a todos, despues de quemar pestañas, llege a la solucion
1.- dentro del cuadro de dialogo de editar la regla, la primera opcion es TYPE (TIPO) y dentro de esta opcion hay un casillero que dice LINE -HEIGHT, ahi escribes el MISMO ALTO QUE PUSISTE A TU DIV y listo sea texto o imagen se centrara , es decir funcionara tu VERTICAL-ALIGN:MIDDLE
suerte a todos
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 10:35.