在實(shí)際的網(wǎng)站建設(shè)過程中,有時(shí)使用了float:left就不能居中,很是困惑,由于元素是向左浮動(dòng),必須要使用這個(gè)float:left,下面講解一下究怎樣來使用才能居中,具體的解決方案如下:
還是舉例來講解吧,這樣顯示直觀些,比如一段div區(qū)域是1200px居中,然后里面有三個(gè)div,寬度都是100px,要將這三個(gè)div放進(jìn)大div里面,按照常規(guī)的做法應(yīng)該這樣寫:
<style>
#abc{ margin 0 auto; width:1200px;}
#a{float:left; width:100px;}
#b{float:left; width:100px;}
#c{float:left; width:100px;}
</style>
<div id="abc">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
但這樣的布局法,三個(gè)小div不會(huì)居中,因?yàn)橛衒loat:left的存在,只會(huì)向左靠齊。而由于三個(gè)div不是具體的文字或圖片,abc中使用text-align:center是沒有用的,在這樣情況下,的方法就是在三個(gè)小div外圍再套上一個(gè)div,而這個(gè)div的寬度必須是這三個(gè)div之和,比如這個(gè)div是#ddd,布局代碼如下:
<style>
#abc{ margin 0 auto; width:1200px;}
#a{float:left; width:100px;}
#b{float:left; width:100px;}
#c{float:left; width:100px;}
#ddd{ width:300px; margin 0 auto;}
</style>
<div id="abc">
<div id="ddd">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>