css - traduccion - altura de línea como un porcentaje que no funciona

tamaño de linea css

Question

Tengo un problema con la altura de la línea que no puedo entender.

El siguiente código centrará una imagen dentro de un div:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

Sin embargo, si cambio la altura de la línea al 100%, la altura de la línea no tendrá efecto (o al menos no se convertirá en el 100% del div).

Ejemplo jsfiddle

¿Alguien sabe lo que estoy haciendo mal?

Answer 1

Cuando usa el porcentaje como la altura de la línea, no se basa en el contenedor div, sino que se basa en el tamaño de la fuente.

Answer 2

Esta es una respuesta muy tardía, sin embargo, en navegadores modernos, suponiendo que el elemento padre también sea el 100% de la altura de la pantalla, puede usar la unidad de ventana vh . FIDDLE

line-height: 100vh;

Soporte del navegador

Answer 3

Puede establecer la altura de la línea en función de la altura del elemento. Si la altura del elemento 200px significa que necesita establecer una altura de línea de 200px para centrar el texto.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

Answer 4

Sé que esta pregunta es antigua, pero encontré lo que para mí es la solución perfecta.

Agrego este css al div que quiero centrar:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Esto funciona todo el tiempo y está limpio.

Editar: Solo para completar, uso scss y tengo una práctica mezcla que incluyo en cada padre cuyos hijos directos quiero tener centrados verticalmente:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

Explicación completa: div:before agregará un elemento dentro del div, pero antes de cualquiera de sus hijos. Cuando se usa :before o :after debemos usar un content: declaration, de lo contrario no pasará nada, pero para nuestro propósito, el contenido puede estar vacío. Luego le decimos al elemento que sea tan alto como su padre, siempre que se defina la altura de sus padres y este elemento sea al menos de bloque en línea. vertical-align define la posición vertical de uno mismo relacionado con el elemento primario, a diferencia de text-align que funciona de manera diferente.

La declaración @mixin es para usuarios sass y se usaría así:

div {
    @include vertical-align(middle)
}

Answer 5

línea-altura: 100% sería una manera fácil de centrar verticalmente los elementos, si se calcula en relación con el contenedor, pero sería demasiado fácil, por lo tanto, no funciona.

Entonces, en cambio, es solo otra forma de decir line-height: 1em (¿verdad?)

Otra forma de centrar verticalmente un elemento sería:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Answer 6

podría no ser bonita, pero está funcionando, y es semántica;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell le da a un elemento la capacidad única de ablillity para alinearse verticalmente (al menos creo que es único)

Answer 7

line-height: 100% significa el 100% del tamaño de fuente para ese elemento, no el 100% de su altura. De hecho, la altura de la línea siempre es relativa al tamaño de la fuente, no a la altura, a menos que su valor use una unidad de longitud absoluta ( px , pt , etc.).