div水平,垂直 居中對齊

使用margin-left:auto;margin-right:auto; 可以讓你的div居中對齊。
.style{margin-left:auto;margin-right:auto;}
縮寫形式爲:
.style{margin:0 auto;}
數字0 表示上下邊距是0。可以按照需要設置成不同的值。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>居中div演示效果</title>
<style type="text/css">
.align-center{
margin:0 auto; /* 居中 這個是必須的,,其它的屬性非必須 */
width:500px; /* 給個寬度 頂到瀏覽器的兩邊就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等內容居中 */
}
</style>
</head>
<body>
<div class="align-center">居中div演示效果</div>
</body>
</html>




注意,需要加上上面的那句

才能生效,要是不想要這句的話,也可以給body加一個屬性:
body{text-align:center;}

另外,讓div內的內容(包括文字及圖片)居中的代碼是: text-align:center;


div居中的完美解決方案! (水平垂直居中)
1,關於居中使用css爲:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
對於ie6,只能把position:改成absolute;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平垂直居中div演示效果</title>
<style type="text/css">
.align-center{
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
}
</style>
</head>
<body>
<div class="align-center">水平垂直居中div演示效果</div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章