水平方向の順序なしリスト () 内でリスト項目 () を垂直方向の中央に配置する方法

縦揃え

内の要素

の垂直方向の配置水平

内の要素多くの場合、見た目の美しさと使いやすさのために必要です。解決策は次のとおりです。

CSS を使用して

• の行の高さを設定できます。以下のように、要素の高さに等しい要素:

<code class="css">li {
    height: 30px;
    line-height: 30px;
}</code>

指定したコード内:

• 各
• の高さは 100 ピクセルです。
• ボタンの高さは 50 ピクセルです (クラス .button によって指定されます)。

コンテンツを垂直方向の中央に配置するには、次の行の高さを追加する必要があります。スタイルシートの値:

<code class="css">.toolbar li {
    line-height: 100px; /* For regular list items */
}
.toolbar li.button {
    line-height: 50px; /* For button list items */
}</code>

これにより、すべてのリスト項目とその内容が垂直方向の中央に配置されます。

以上が水平方向の順序なしリスト () 内でリスト項目 () を垂直方向の中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。