幅と高さが固定された div 内の垂直方向の中央揃えの CSS 実装の詳細な説明。共有例。

この記事では主に、固定の幅と高さ p 内で CSS の垂直方向の中央揃え、つまり p を基準にして p 内の要素を垂直方向に中央揃えにする方法の詳細な例を紹介します。必要な方は、

要件ケース

を参照してください。ケース 外側の p の高さと幅は固定されていますが、内部の内容は固定されていません。多くの友人は、内部のコンテンツが中央に表示されるように、頭にパディングやマージンを追加していますが、コンテンツが変更されても、頭の固定されたパディングやマージンは変更されません。その結果、縦方向が中心にならないことになります！

次の p

<p class="outer"><p class="inner">haorooms内部内容</p></p>

スタイルが次のような場合

.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}

vertical-align:middle が機能しないことはわかっています。多くの友人が .inner について大騒ぎするでしょう。そして、上で言ったこと、マージンを追加してください等々！それでは、この状況に対するより良い解決策はあるのでしょうか?

解決策

アイデア: cssHack を追加し、cssHack の line-height を外側の p の高さに等しく設定すると、vertical-align:middle を使用できます。

p は次のとおりです:

<p class="outer">   
    <p class="inner">haorooms内部内容</p><p class="v">cssHack</p>   
</p>

スタイルは次のとおりです:

* {   
    margin: 0;   
    padding: 0;   
}   
.outer {   
    background-color: #ccc;   
    font-size: 24px;   
    height: 350px;   
    text-align: center;   
    overflow: hidden;   
    width: 280px;   
}   
.outer  .inner,   
.outer  .v {   
    display: inline-block;   
    zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
}   
.outer  .inner {               
    line-height: 1.8;   
    padding: 0 4px 0 5px;   
    vertical-align: middle;   
    width: 262px;              
}   
.outer  .v {   
    line-height: 350px;   
    text-indent:-9999px;   
    width: 1px;            
}

このようにして、p 内の垂直方向のセンタリングが達成されます。

以上が幅と高さが固定された div 内の垂直方向の中央揃えの CSS 実装の詳細な説明。共有例。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。