css如何實(shí)現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中-創(chuàng)新互聯(lián)

這篇文章主要介紹了css如何實(shí)現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于中大型企業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計(jì)客戶超過千家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對(duì)接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

1、li內(nèi)容垂直居中

flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。當(dāng)設(shè)置它的屬性值為column時(shí)，表示靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，當(dāng)設(shè)置其屬性值為center時(shí)，表示項(xiàng)目位于容器的中心。這樣就可以實(shí)現(xiàn)ul中l(wèi)i內(nèi)容的垂直居中。代碼如下：

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內(nèi)容水平居中

flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。當(dāng)設(shè)置它的屬性值為row時(shí)（默認(rèn)值），表示靈活的項(xiàng)目將水平顯示，正如一個(gè)行一樣。 justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，當(dāng)設(shè)置其屬性值為center時(shí)，表示項(xiàng)目位于容器的中心。這樣就可以實(shí)現(xiàn)ul中l(wèi)i內(nèi)容的水平居中。代碼如下：

HTML部分：

<div class="box">
	<ul>
	   <li>今天心情不錯(cuò)</li>
	   <li>今天心情不錯(cuò)</li>
	   <li>今天心情不錯(cuò)</li>
	   <li>今天心情不錯(cuò)</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>

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css如何實(shí)現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!

文章題目：css如何實(shí)現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中-創(chuàng)新互聯(lián)
本文路徑：http://www.muchs.cn/article30/djhgso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、外貿(mào)建站、Google、全網(wǎng)營銷推廣、手機(jī)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)