ホームページ > ウェブフロントエンド > CSSチュートリアル > 水平方向のリスト内の要素を垂直方向の中央に配置するにはどうすればよいですか?

水平方向のリスト内の要素を垂直方向の中央に配置するにはどうすればよいですか?

DDD
リリース: 2024-10-30 15:42:26
オリジナル
292 人が閲覧しました

How to Vertically Center `` Elements in a Horizontal `` List?

縦揃え

  • 内の要素

    水平方向の
      を作成する場合リストでは、各
    • を垂直方向の中央に配置する必要がある場合があります。美的または機能的な理由からのアイテム。デフォルトでは、
    • 要素はスペースの上部に整列します。この CSS プロパティを使用すると、縦方向の中央に配置できます。
      <code class="css">li {
          height: 30px;
          line-height: 30px;
      }</code>
      ログイン後にコピー
      縦方向に配置するには
    • 要素では、line-height プロパティを利用できます。 line-height を
    • の高さと同じに設定することで、要素内のテキストは垂直方向の中央に配置されます。たとえば、それぞれの
    • 高さが 30 ピクセルの場合、次の CSS ルールにより垂直方向の配置が実現されます:

    以上が水平方向のリスト内の要素を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

  • ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート