Zeilenhöhe als Prozentsatz, der nicht funktioniert

Ich habe ein Problem mit der Zeilenhöhe, bei dem ich mich nicht so richtig zurechtfinden kann.

Der folgende Code zentriert ein Bild innerhalb eines 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>

Wenn ich jedoch die Zeilenhöhe auf 100% ändere, wird die Zeilenhöhe nicht wirksam (oder wird zumindest nicht zu 100% des Div).

Beispiel jsfiddle

Weiß jemand was ich falsch mache?

line-height: 100%bedeutet 100% der Schriftgröße für dieses Element, nicht 100% seiner Höhe. In der Tat ist die Zeilenhöhe auf die Schriftgröße immer relativ, nicht die Höhe, es sei denn , sein Wert eine Einheit der absolute Länge verwendet ( px, ptusw.).

Ich weiß, dass diese Frage alt ist, aber ich habe herausgefunden, was für mich die perfekte Problemumgehung ist.

Ich füge dieses CSS dem Div hinzu, das ich zentrieren möchte:

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

Dies funktioniert jedes Mal und es ist sauber.

Bearbeiten: Nur zur Vervollständigung verwende ich scss und ich habe ein praktisches Mixin, das ich jedem Elternteil hinzufüge , dessen direkte Kinder ich vertikal zentrieren möchte:

@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;
  }
}

Vollständige Erklärung: div:beforeFügt ein Element innerhalb des div hinzu, jedoch vor einem seiner untergeordneten Elemente. Bei Verwendung :beforeoder :afterwir müssen eine content:Erklärung verwenden, sonst passiert nichts, aber für unseren Zweck kann der Inhalt leer sein. Dann weisen wir das Element an, so groß wie sein übergeordnetes Element zu sein, solange die Höhe des übergeordneten Elements definiert ist und dieses Element mindestens ein Inline-Block ist. vertical-aligndefiniert die vertikale Position des Selbst in Bezug auf die Eltern, im Gegensatz dazu text-alignfunktioniert dies anders.

Die @mixinDeklaration ist für Sass-Benutzer und wird folgendermaßen verwendet:

div {
    @include vertical-align(middle)
}

Wenn Sie den Prozentsatz als Zeilenhöhe verwenden, basiert er nicht auf dem div-Container, sondern auf der Schriftgröße.

Zeilenhöhe: 100% wäre eine einfache Möglichkeit, Elemente vertikal zu zentrieren, wenn sie in Bezug auf den Container berechnet würden. Dies wäre jedoch zu einfach und funktioniert daher nicht.

Stattdessen ist es nur eine andere Art, Zeilenhöhe zu sagen: 1em (richtig?)

Eine andere Möglichkeit, ein Element vertikal zu zentrieren, wäre:

.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" */
}

mag nicht schön sein, aber es funktioniert und es ist semantisch;

<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 gibt einem Element die einzigartige Fähigkeit, Tabellen vertikal auszurichten (zumindest denke ich, dass es einzigartig ist).

Dies ist eine sehr späte Antwort. In modernen Browsern können Sie jedoch die vhAnsichtsfenstereinheit verwenden , vorausgesetzt, das übergeordnete Element entspricht ebenfalls 100% der Bildschirmhöhe . GEIGE

line-height: 100vh;

Browser-Unterstützung

Diese Lösung funktioniert in IE9 und höher. Zuerst setzen wir die oberste Position des Kindes auf 50% (Mitte des Elternteils). translateVerschieben Sie das Kind dann nach der Regel um die Hälfte seiner tatsächlichen Größe nach oben. Der Hauptvorteil ist, dass wir die Größe des Kindes nicht definieren müssen, sondern vom Browser dynamisch berechnet werden. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Ein moderner Ansatz ist die Verwendung von Flexbox, die einfacher und sauberer ist. Allerdings Flexbox ist ein ganz anderes Paradigma von dem, was inline-block, floatoderposition verwendet werden soll.

So richten Sie Elemente in .parentIhnen aus:

.parent {
  display: flex;
  align-items: center;
}

Das ist es auch schon. Kinder vonflex Eltern werden automatisch in flexible untergeordnete Elemente konvertiert.

Sie sollten mehr über Flexbox lesen. Ein guter Anfang ist dieses Spickzettel: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sie können die Zeilenhöhe basierend auf dieser Elementhöhe festlegen . Wenn die Elementhöhe 200px bedeutet, dass Sie die Zeilenhöhe auf 200px einstellen müssen, um den Text zu zentrieren.

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

<span>Im vertically center</span>