最近開始倒回來看看CSS這塊兒有什么不太了解的地方需要鞏固！呵，好家伙！一番折騰之后我發(fā)現(xiàn)還真有很多不太了解的。真是學(xué)無止境啊…CK說網(wǎng)上有很大概15種可以讓CSS元素居中的方法。Oh,賣糕的！這是逼我查資料到夜晚兩點的節(jié)奏么？
閑話休體，現(xiàn)在我們來進入正題咯：
先來說說水平居中。
CSS水平居中的方法:
1、最常見的margin方法：
給元素設(shè)置一個顯示式的寬度，然后加上margin的左右值為auto，示例：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class=”center”>
</div>
</body>
</html>
上面這個是有帶有寬度的div塊。如果是沒有設(shè)置的div塊，我們還可以這樣設(shè)置，exp:
.center {
margin: 0 auto;
}
如此這般！就可以了！
0表示設(shè)置元素center的上下外邊距為0。
優(yōu)點：實現(xiàn)方法簡單易懂，瀏覽器兼容性極強；
缺點：擴展性差，無法自適應(yīng)未知項狀況，而且容易出現(xiàn)元素擠壓的情形
2、text-again：center
這是大家都很熟悉并且經(jīng)常使用到的文本居中。簡單、快捷，暴力、方便。缺點就是只能用于文本
還是做個例子：
.center{
border: 1px solid maroon;
width: 200px;
text-align: center;
height: 100px;
}
<div class=”center”>
這里是文本
</div>
第二種就醬紫了。
3、使用inline-block 和 text-again 使塊級元素居中的方法：
<span style=”font-weight: normal;”> .pagination {
text-align: center;
}
.center {
display: inline-block;
zoom: 1;
}
t;div class=”pagination”>
<div class=”center”>
這里是文本
</div>
t;/div></span>
使用該方法的關(guān)鍵點在于需要在元素的父級元素中設(shè)置text-center屬性為center
這中方法簡單，擴展性強。缺點就是要解決inline-block的兼容的問題。
4、利用浮動的包裹性和相對定位的百分比數(shù)據(jù)值特性，傳說稱之為“相對浮動”：
這里我給大家做個例子大家就都明白了.
<span style=”font-weight: normal;”><span style=”white-space:pre”> </span>.pagination {
<span style=”white-space:pre”> </span>float: left;
<span style=”white-space:pre”> </span>position: relative;
<span style=”white-space:pre”> </span>left: 50%;
新聞熱點
疑難解答
