"vertical-align: middle" no se alinea en el medio en Firefox

Estoy tratando de alinear algunos textos de diferentes tamaños verticalmente, sin embargo, Firefox muestra el texto más pequeño por encima del medio."vertical-align: middle" no se alinea en el medio en Firefox

CSS:

div.categoryLinks { 
    margin: 1em 16px; 
    padding: 0 4px; 
    border-width: 1px 0; 
    border-style: solid; 
    border-color: #ece754; 
    background: #f7f5b7; 
    color: #a49f1c; 
    text-align: center; 
    font-size: 1.4em; 
} 
div.categoryLinks em { 
    font-size: 0.6em; 
    font-style: normal; 
    vertical-align: middle; 
}

HTML:

<div class="categoryLinks"> 
    <em>SECTION:</em> 
    Page One &#183; 
    Page Two &#183; 
    <a href="link">Page Three</a> 
</div>

Captura de pantalla: screenshot http://www.doheth.co.uk/files/valign.jpg

ACTUALIZACIÓN: para ser claros, soy consciente, más o menos-how vertical-align obras , es decir, ya conozco los conceptos erróneos comunes.

De más investigación, parece que la forma más sencilla de solucionar este problema es ajustar el texto más grande en un span y establecer vertical-align en eso también. Los dos hijos de .categoryLinks se alinean uno con respecto al otro. ¿A menos que alguien pueda mostrar una mejor manera sin margen adicional?

Fuente

2009-04-08 DisgruntledGoat

Alineación vertical solo funciona como se esperaba en las celdas de la tabla o elementos de bloque en línea. Si desea obtener más información, le sugiero que lea Understanding vertical-align, or "How (Not) To Vertically Center Content".

Edit: Tienes algo más en juego porque me funciona igual que en Firefox. Incluso dejé caer el tamaño de la fuente de la SECCIÓN: abajo y todavía está centrado. ¿Has usado Firebug para ver qué otro CSS lo está afectando?

Esto funciona como es:

<html> 
<head> 
<style type="text/css"> 
div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 
} 
div.categoryLinks em { 
     font-size: 0.4em; 
     font-style: normal; 
     vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<div class="categoryLinks"> 
     <em>SECTION:</em> 
     Page One &#183; 
     Page Two &#183; 
     <a href="link">Page Three</a> 
</div> 
</body>

Nota: tamaño de la sección de la fuente cambia a 0.4em 0.6em de originales para enfatizar el punto.

Fuente

2009-04-08 22:33:57 cletus

Solo para agregar a esto, puedes probar 'display: table-cell' pero no estoy seguro de cuál es la compatibilidad del navegador para él. – inspite

Habla de text-align: center CSS property, no de valign HTML property. –

@ buti-oxa: No, no lo es. Está hablando de la propiedad CSS vertical-alinear – KOGI

Firefox se está procesando correctamente. La propiedad de alineación vertical está en línea, lo que significa que no se aplica a elementos de bloque como < div> (y < p>, etc.). Intente agregar pantalla: en línea y vea si eso funciona.

Fuente

2009-04-08 22:32:22 sli

O, posiblemente, inline-block. Dependiendo de la implementación (y compatibilidad con varios navegadores) podría ofrecer lo mejor de ambos mundos. –

Lo aplica al SECCIÓN: que ya está en línea por defecto. –

Establecer el em en el bloque en línea no hace la diferencia, es aún mayor en Firefox. – DisgruntledGoat

Vertical Align solo se aplica a elementos de bloque en línea (creo que las imágenes son las únicas que tienen esta propiedad de diseño por defecto), para usarlo para posicionar un elemento en línea, primero conviértalo en un bloque en línea , entonces se puede utilizar margen y el relleno para posicionarlo similar a cómo se woudl un elemento de bloque normal:

div.categoryLinks { 
     margin: 1em 16px; 
     padding: 0 4px; 
     border-width: 1px 0; 
     border-style: solid; 
     border-color: #ece754; 
     background: #f7f5b7; 
     color: #a49f1c; 
     text-align: center; 
     font-size: 1.4em; 

} 
div.categoryLinks em { 
      font-size: 0.6em; 

      display:inline-block; 
     vertical-align:top; 
     font-style: normal; 
     padding: 2px 0 0 0; 

}

tienes que tweak it a little for firefox 2 sin embargo, pero esto es debido a un ejemplo raer de Firefox no apoyar los estándares web. Por otro lado, no puedes molestarte con el ajuste ya que pocas personas todavía usan ffx2, y es solo un error de diseño muy leve.

Fuente

2009-04-08 22:33:37 wheresrhys

Establecer el em en el bloque en línea no hace la diferencia, es aún mayor en Firefox. – DisgruntledGoat

pero el punto es que una vez que tienes pantalla: bloque en línea puedes agregar algo de relleno a la em también para empujar hacia abajo. – wheresrhys

Tuve el mismo problema. Esto funciona para mí:

<style type="text/css"> 
    div.parent { 
     position: relative; 
    } 

    /*vertical middle and horizontal center align*/ 
    img.child { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    </style> 

    <div class="parent"> 
     <img class="child"> 
    </div>

Fuente

2013-01-26 19:45:34 algreat

me fijo Este cuestiones sólo la eliminación:

white-space: nowrap;

de div padre. No estoy seguro de por qué, pero con esta regla añadió, Firefox no se aplica el:

vertical-align: middle;

Fuente

2014-04-10 15:40:48 robertovg

"vertical-align: middle" no se alinea en el medio en Firefox

Respuesta

Cuestiones relacionadas