css 不定寬度的塊級元素水平居中
阿新 • • 發佈:2019-02-15
塊級元素水平居中不能用text-align:center 但是有一種錯覺如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.div1{
margin-top: 100px;
border:2px dotted red;
text-align:center
}
.div2{
margin:20px;
border:2px solid blue ;
/*width: 200px;*/
}
</style>
<body>
<div class="div1">
<div class="div2">aaa</div>
</div1>
</body>
</html>
上述程式碼執行結果如下圖:
1. 看似包含“aaa ”的div也水平居中了,可是這裡有個問題,就是因為兩個div都是不定寬的,text-align使aaa在div2中水平居中了,div2又撐起了div1。所以看上去也達到了水平居中的效果。
2. 此時要是把程式碼中的註釋去掉,也就是給div2 規定一個寬度,那麼執行結果如下:
3. 可以看到text-aligin 不好使了。
4. 常用的做法是給div1新增樣式:
float:left; /* 1 */
position:relative;
left:50% /* 2 */
給div2新增樣式
position:relative; /* 3 */
left:-50%
原理如下:
1處程式碼作用是使div浮動起來,脫離了流,這樣改變了div1 和div2的塊級元素屬性,
2處程式碼使div1 連同div2 一起針對body元素向右移動50% 注意是整個螢幕的50%,百分比指的是針對上一級元素。這樣兩個div的左邊緣就移動到了body元素的中間位置,因為有程式碼1的作用,這時候兩個div都是被div2的內容撐起,也就是它們的大小會隨著div2內容的改變而改變。
3處的程式碼實現div2相對於div1向左移動50%,這樣就實現了水平居中的效果。如下圖所示