Kann line-height-Attribut Inherit Parent-Div-Height-Eigenschaft Oder der Zugriff Height-Eigenschaft Des Div-Zu Dem Es Gehört?

Ich habe einen div mit der Höhe 50px enthält ein child-div. Die Höhe des untergeordneten div-Element geerbt von den Eltern mit dem css-Attribut/Wert-paar: height: 100%.

    <div style="height: 50px;">
        <div style="height: 100%;">Some Text</div>
    </div>

Möchte ich verically richten Sie den text in das div Kind und zu tun, so dass ich hinzufügen, die line-height - Eigenschaft, um das untergeordnete div.

    <div style="height: 50px;">
        <div style="height: 100%; line-height: 50px;">Some Text</div>
    </div>

Beachten Sie, dass für line-height ich habe explizit definieren, die Höhe von 50px.

Des Kindes div kann Erben die Höhe Eigenschaft von der Mutter (mit height: 100%), aber für line-height muss ich explizit den Wert?

Wenn das so ist, das ist (IMO) kindof chaotisch, weil sagen wir mal ich habe ein div geschachtelt ist 10 Ebenen tief und es erbt die Höhe Eigentum alle der Weg nach unten. Dann, wenn ich will, um vertikal ausrichten von text in diesem div habe ich nicht nur hard-code der Wert gleich der Höhe der oberen-die meisten übergeordneten div aber ich habe navigieren durch meinen code zu finden, der Elternteil, definiert explizit die Höhe.

Hinweis, dass ich nicht wollen, um zu definieren, line-height in der übergeordneten Ebene und verwenden Sie dann Erben in der Kind-Knoten, um den Wert.

Wäre es schön, wenn es eine Möglichkeit zum festlegen line-height gleich der Höhe von dem div, in der es sich befindet. Vielleicht würde die syntax wie folgt Aussehen (Total aus):

<div style="height: 100%; line-height: from-property('height');">Some Text</div>

Wo line-height verwendet die aus-Eigenschaft - Methode auf die height-Eigenschaft. (Ja, ich weiß eine Methode wie aus-Eigenschaft stellt das Potenzial für eine zirkuläre Abhängigkeit, so dass vielleicht einige andere Weg wäre besser. Ich bin einfach nur benutzen, um das auszudrücken, was ich gerne hätte.)

Dank!

Jan

Man könnte auch den umgekehrten Weg gehen Runde, und lassen Sie die line-height des Kindes, Kontrolle der Höhe des übergeordneten Elements.

InformationsquelleAutor Jan Tacci | 2012-11-12

  1. 1

    Könnten Sie verwenden jQuery, um die Höhe der parent() und dann noch line-height dynamisch basierend auf diese Höhe?

    Würde es so Aussehen:

    $(document).ready(function(){

    $('.lineHeightDiv').each(function(){
        var div_height = $(this).parent('div').height();
        $(this).css('lineHeight', (div_height / 2) + "px");
    });

});

    InformationsquelleAutor Brent

  2. 7

    line-height ausgelegt ist, legen Sie die Abstände zwischen den Linien, und verwenden Sie diese, um etwas ausrichten vertikal ist nicht eine gute option. Es sei denn, Sie sind sicher, dass der Inhalt immer in einer Zeile.

    Verwenden Sie diese, um es vertikal zentriert, nicht perfekt aber.

    div.parent {
  display: table-cell;
  vertical-align: middle;
}
    Dies ist eine potenzielle Gefahr, und ist nicht unterstützt in IE7. Mithilfe von line-height und horizontal "zentriert" ist durchaus akzeptabel.
    Richtig, das ist, warum ich sagen, es ist nicht perfekt. Aber hier ist einige hack zu machen, damit es funktioniert in IE7. jakpsatweb.cz/css/css-vertical-center-solution.html

    InformationsquelleAutor xiaoyi

Schreibe einen Kommentar