ul の li コンテンツを垂直方向にセンタリングおよび水平方向にセンタリングする方法の詳細な図による説明

ページ レイアウトでは、li タグがリスト、ナビゲーション、タブなどによく使用されます。では、li を ul の中央に配置する方法を知っていますか?この記事では、ul の li を水平方向に中央に配置する方法と、li コンテンツを垂直方向に中央に配置する方法について説明します。興味のある方は以下を読み続けてください。

1. li コンテンツは垂直方向の中央に配置されます。

flex-direction 属性は、フレキシブル項目の方向を指定します。プロパティ値が column に設定されている場合、フレキシブル項目は列と同じように垂直に表示されます。 justify-content は、フレキシブル ボックス要素の主軸 (横軸) 方向の配置を設定または取得するために使用されます。その属性値が center に設定されている場合、アイテムがコンテナーの中央に配置されることを意味します。このようにして、ul 内の li コンテンツの垂直方向の中心化を実現できます。コードは次のとおりです。

HTML 部分:

<div class="box">
    <ul>
	 <li>aa</li>
	 <li>bb</li>
	 <li>cc</li>
	 <li>dd</li>
    </ul>
</div>

CSS 部分:

<style type="text/css">
	.box{
	     width: 300px;
	     height: 300px;
	     border: 1px solid red;
	    }
	.box ul{
	     height: 300px;
	     display: flex;
	     flex-direction: column;
	     justify-content: center;
	    }
	
	 .box ul li{
	      list-style: none;
	      margin: 0 auto;
	      }
</style>

レンダリング:

2. li コンテンツは水平方向に中央揃えになります。

flex-direction 属性は、フレキシブル項目の方向を指定します。属性値を row (デフォルト値) に設定すると、フレキシブル項目が行と同様に水平に表示されることになります。 justify-content は、フレキシブル ボックス要素の主軸 (横軸) 方向の配置を設定または取得するために使用されます。その属性値が center に設定されている場合、アイテムがコンテナーの中央に配置されることを意味します。このようにして、ul における li 含有量の水平方向の中心化を実現できます。コードは次のとおりです。

HTML 部分:

<div class="box">
	<ul>
	   <li>今天心情不错</li>
	   <li>今天心情不错</li>
	   <li>今天心情不错</li>
	   <li>今天心情不错</li>
	 </ul>
</div>

CSS 部分:

<style type="text/css">
	.box{
		width: 100%;
		height: 200px;
		border: 1px solid #000;
		}
	 .box ul{
		 height: 200px;
		 display: flex;
		 flex-direction: row;
		 justify-content: center;
		 }
	 .box ul li{
		    list-style: none;
		    height: 200px;
		    line-height: 200px;
		   }
</style>

レンダリング:

要約: 上記では、ul の li タグの内容を中央揃えにする方法を紹介しています。垂直方向の中央揃えの場合は flex-direction: 列を使用し、水平方向の中央揃えの場合は flex-direction: row を使用します。知らない人は、自分で試してみて、li コンテンツを中央に配置する効果が得られるかどうかを確認してください。このチュートリアルが役立つことを願っています。

以上がul の li コンテンツを垂直方向にセンタリングおよび水平方向にセンタリングする方法の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。