“Vertical-align: middle” no se alinea a la mitad en Firefox

StackOverflow https://stackoverflow.com/questions/732139

  •  06-09-2019
  •  | 
  •  

Pregunta

Estoy tratando de alinear un texto de diferentes tamaños verticalmente, sin embargo, Firefox muestra la forma en el texto más pequeño por encima de la media.

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: pantalla
(fuente: doheth.co.uk )

Actualizar . Para ser claros, soy consciente, más o menos cómo funciona vertical-align, es decir, que ya conocen los conceptos erróneos comunes

A partir de una investigación más, parece que la forma más sencilla de solucionar este problema es envolver el texto más grande en un span y establecer vertical-align en eso también. Los dos hijos de .categoryLinks luego se alinean respecto a la otra. A menos que alguien puede mostrar una mejor manera sin marcaje adicional?

¿Fue útil?

Solución

alinear

Vertical sólo funciona como se espera en celdas de la tabla o elementos inline-bloque. Si desea más información le sugiero que lea Comprender vertical-align, o "¿Cómo (no) para verticalmente Centro de contenido ".

Editar Tienes algo más en juego, ya que funciona para mí al igual que en Firefox. Incluso me cayó el tamaño de la fuente de la sección: la derecha abajo y todavía está centrado. ¿Ha utilizado Firebug para ver qué otras CSS que 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

Otros consejos

Firefox está prestando correctamente. La propiedad vertical-align es en línea, lo que significa que no se aplica a bloquear elementos como

(y

, etc). Trate de añadir pantalla:. En línea y ver si funciona

Alineación vertical se supone que sólo se aplican a inline-block elementos (creo que las imágenes son las únicas cosas que tienen esta propiedad layout por defecto), por lo que usarlo para posicionar un elemento en línea, primero convertirlo en un bloque de línea, a continuación, puede utilizar el 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;

}

Hay que ajustar un poco por Firefox 2 sin embargo, pero esto es debido a un ejemplo raer de Firefox no apoyar los estándares web. Por otro lado no se podía molestarse con el truco ya que pocas personas siguen utilizando ffx2, y es sólo un defecto de diseño muy menor.

Me fijo estas cuestiones sólo la eliminación: 

 white-space: nowrap;

div de los padres. No estoy seguro de por qué, pero con esta regla añadida, Firefox no se aplica al: 

vertical-align: middle;

Yo tenía 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top