CSS學習之DIV容器任意分辨率瀏覽器下水平居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>容器任意分辨率下水平居中</title>
<style type="text/css">
*{  
    margin:0;  
    padding:0;  
}
html,
body{
	width:100%;
	height:100%;
	text-align:center;
}
.wrapper{
	width:800px;
	height:100%;
	margin:0 auto;
	background:#CCC;
	text-align:left;
}
</style>
</head>

<body>
<div class="wrapper">test</div>
</body>
</html>


事實上margin:0 auto就可以讓所有瀏覽器水平居中,但是關鍵在於文檔開始要有DOCTYPE聲明,也就是在瀏覽器標準渲染模式下纔可以

如果刪除頂部的<!DOCTYPE html>就觸發了混亂模式,那麼IE下會居左,所以我給body加上text-align:center,因爲IE下瀏覽器會誤認爲讓所有內容都居中而不僅僅是文字

因爲這會影響到容器內文字居中,所以還得在容器加上text-align:left居左,這樣就可以讓任何瀏覽器任何分辨率下都可以水平居中,測試通過FF Chrome IE6 IE8 Safari Opera 

發佈了52 篇原創文章 · 獲贊 3 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章