CSS网页布局DIV水平居中的各种方法
三、其它的居中方式
上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：
body {
padding:10px 150px;
}
这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
＜!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"＞
＜head＞
＜title＞ 随浏览器窗口大小而改变的具有弹性的居中布局 ＜/title＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜style type="text/css"＞
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #333;
background-color:#ccc;
}
＜/style＞
＜/head＞
＜body＞
＜div id="wrap"＞
一种随浏览器窗口大小而改变的具有弹性的居中布局：
＜pre＞
body {
padding:10px 150px;
}
这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
＜/pre＞
＜/div＞
＜/body＞
＜/html＞
当然这只是“貌似居中”，不过却常常很有用处。
最新相关文章发表评论