建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

css怎么整体居中

时间:2019-07-31 17:31来源:PHP中文网 作者:猪哥 点击:
一般网页主体内容布局均为居中于浏览器。如php中文网首页,主体为居中布局。 如何使用CSS让整个网页布局居中呢?布局居中条件是什么呢? 首先我们要对body设置css内容居中样式(css text-align:center),然后布局最外层DIV盒子时候使用 margin:0 auto即可让
一般网页主体内容布局均为居中于浏览器。如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>

(责任编辑:yang)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片