居中對齊的一些總結

一、元素屏幕居中對齊字體

相信不少人對margin:0 auto並不陌生,可是margin設置只能對齊左右,不能作到屏幕居中對齊。spa

正確的作法是設一個position:absolute;top:50%;left:50;code

然而此時元素只是左上角居中了,設一個margin-left:-100px;margin-top:-100px;(假設元素200*200)就能實現居中對齊了。blog

二、div內元素居中。it

1 <div id=「a」>
2      <p>123</p>
3      <p>123</p>
4 </div>

若是實現居中的話。io

正常的顯示效果:第二個p被擠到下面去了,table

此時正確的作法是:class

讓p強制變成表格元素,並實現垂直居中。float

display:table-cell;方法

vertical-align:middle;

text-align:center;

效果如圖:

三、ul內幾個li居中

在作項目的時候,涉及到一行顯示幾個圖標icon,而後icon附近有一些字符,而後對這幾個li進行對齊。

方法一:直接對ul設置padding-left值,使其表面上看着像居中。

方法二:對ul設相對定位,而後向左偏移50%,添加向左浮動,而後對li子元素相對定位,向右偏移。通常以上就能夠實現了,可是ie7不兼容。由於li已經把盒子結構破壞了,此時在li內部添加一個span  並設置爲塊元素 就能夠將li撐開了。

*{margin:0; padding: 0; list-style: none;}
.box{overflow: hidden; zoom:1;}
li{border:1px red solid; float: left; display: inline;}
ul{position: relative; left: 50%; float: left;}
li{position: relative; right:50%;}
span{display: block; width: 50px; height: 50px;}

方法三:將li元素變爲內聯塊元素,並設置無浮動。設置寬高值。

此時會出現有間隔的現象,解決辦法是將ul的font-size設置爲0,而後對li單獨設置字體大小值。就能夠解決。

ul{text-align:center;font-size:0;}
li{display:inline-block;float:none; width:50px;height:50px;border:1px solid red;font-size:12px;}

相關文章
相關標籤/搜索