ホームページ  >  記事  >  ウェブフロントエンド  >  水平方向の順序なしリスト () 内でリスト項目 () を垂直方向の中央に配置する方法

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

DDD
DDDオリジナル
2024-10-31 21:13:29758ブラウズ

How to Vertically Center List Items () Inside a Horizontal Unordered List ()?

縦揃え

    • 内の要素

    • の垂直方向の配置水平
        内の要素多くの場合、見た目の美しさと使いやすさのために必要です。解決策は次のとおりです。

        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 サイトの他の関連記事を参照してください。

      声明:
      この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。