7

子 div を含む高さ 50px の div があります。子 div の高さは、css 属性/値のペア: height: 100%を使用して親から継承されます。

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

子 div のテキストを正確に揃えたいので、その子 div にline-heightプロパティを追加します。

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

line-heightでは、高さを 50px として明示的に定義する必要があることに注意してください。

子 div は親から height プロパティを継承できます( height: 100% を使用)が、line-heightの場合は明示的に値を設定する必要がありますか?

もしそうなら、これは（IMO）ちょっと厄介です。10レベルの深さでネストされたdivがあり、heightプロパティをずっと継承しているとしましょう。次に、この div 内のテキストを垂直方向に揃えたい場合は、一番上の親 div の高さに等しくなるように値をハードコーディングするだけでなく、コードをナビゲートして、高さを明示的に定義する親を見つける必要があります。

親レベルで line-height を定義してから、子ノードで継承を使用して値を取得したくないことに注意してください。

line-heightをそれが存在する div の高さに等しく設定する方法があればいいのですが、おそらく構文は次のようになります (完全に構成されています)。

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

line -heightはfrom-propertyメソッドを使用して高さプロパティにアクセスします。(はい、 from-propertyなどのメソッドを使用すると、循環依存関係が発生する可能性があることはわかっているので、おそらく他の方法の方がよいでしょう。私は単純にそれを使用して、自分が持ちたいものを表現しています。)

ありがとう！

1月

4

2 に答える 2

7

line-heightは行間の間隔を設定するように設計されており、これを使用して何かを垂直に揃えるのは適切なオプションではありません。コンテンツが常に1行になることが確実でない限り。

これを使用して垂直方向の中央にしますが、完全ではありません。

div.parent {
  display: table-cell;
  vertical-align: middle;
}
于 2012-11-12T15:58:38.373 に答える
1

jQuery を使用して高さを計算し、parent()その高さに基づいて line-height を動的に追加できますか?

次のようになります。

$(document).ready(function(){

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

});
于 2012-11-12T15:56:16.700 に答える