(資料圖片)

導(dǎo)讀

1、實現(xiàn)div下只有一個子div的水平居中辦法如下：.continer{height:100px;width:100px;background-color:aqua;text-align: center;//內(nèi)聯(lián)元素，使用text-align屬性，可以修改對齊方式}.child{display: inline;//將子div設(shè)置為內(nèi)聯(lián)元素}我是子div2、實現(xiàn)div下只有多個子div的水平居中，思路是在多個子div外面再加一個div（假設(shè)命名為inner），同時inner設(shè)置為水平居中margin：0 auto，然后將多個子div設(shè)置在同一行，同時水平居中。

2、代碼如下：.continer{height:100px;width:500px;background-color:aqua;text-align: center;}.inner{margin:0 auto;text-align: center;background-color:chartreuse}.child{display: inline-block;vertical-align: top;background-color: coral}我是子div1我是子div2我是子div3擴展資料：使元素水平居中的幾種方法：如果是內(nèi)聯(lián)元素，比如span，img，a，input等，直接使用text-align:center2、如果是塊級元素，比如h1-h6標(biāo)題元素，div，p，form，section等，方法如下：1）父元素使用margin:0 auto2）將塊級元素設(shè)置為內(nèi)聯(lián)元素，使用display:inline;或者disply:inline-block;3、使用flex布局，代碼如下：.box {display: flex;justify-content: center; /* 水平居中 */align-items: center; ? ? /* 垂直居中 */width: 1000px;height: 600px;border: 1px solid red;}.inner {width: 300px;height: 200px;background-color: red;}

本文到此分享完畢，希望對大家有所幫助。

免責(zé)聲明：本文由用戶上傳，如有侵權(quán)請聯(lián)系刪除！

標(biāo)簽：