首頁  >  文章  >  web前端  >  圖文詳解ul中li內容垂直居中和水平居中的方法

圖文詳解ul中li內容垂直居中和水平居中的方法

yulia
yulia原創
2018-10-08 14:11:1837804瀏覽

在頁面佈局時,經常會用到li標籤,它可用於列表,導航,選項卡等等,那你知道如何讓ul中的li居中嗎?這篇文章就和大家講講如何讓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>

效果圖:

圖文詳解ul中li內容垂直居中和水平居中的方法

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內容垂直居中和水平居中的方法

總結:以上介紹了ul中li標籤內容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己動手嘗試,看看能不能實現li內容居中的效果,希望這個教學可以幫助你!

以上是圖文詳解ul中li內容垂直居中和水平居中的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn