一般网页主体内容布局均为居中于浏览器. 如 PHP 中文网首页, 主体为居中布局. 如何使用 CSS 让整个网页布局居中呢? 布局居中条件是什么呢?
首先我们要对 body 设置 CSS 内容居中样式 (CSS text-align:center), 然后布局最外层 DIV 盒子时候使用 margin:0 auto 即可让对象布局居中.
当然我们对盒子对象使用了 margin:0 auto, 有的浏览器不对 body 对象加 text-align:center 样式, 布局仍然是居中的, 这是因为不同浏览器默认样式不同造成.
如果不对 body 设置 text-align:center, 这样会造成有的浏览器布局居中, 有的靠左, 这样布局的兼容就产生了.
解释: margin:0 auto, 意思是让对象上下间隔为 0, 左右间隔自动, 随对象宽度左右间隔自动,
网页布局居中条件
1, 对 body 设置 CSS 内容居中样式 text-align:center, 代码:
body{text-align:center}
2, 对最外层对象设置 margin:0 auto 样式, 代码:
.PHP{margin:0 auto}
案例:
为了观察到布局居中效果, 我们 CSS 命名对象为 ".php", 设置 CSS 边框为黑色, CSS 宽度为 400px,CSS 高度为 100px.
1,CSS 代码如下:
- <style>
- body{text-align:center} .PHP{margin:0 auto;width:400px;height:100px;border:1px
- solid #000} /* CSS 注释: 设置对象边框, 宽度, 高度 便于观察布局效果 */
- </style>
2,html 代码片段:
<div class="php"> 对象 PHP 布局居中了 </div>
推荐: CSS 文档 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14064.html