DIV CSS固定宽度居中实例

DIV CSS固定宽度居中布局实例

在机关一个网页时，颇为重要的是一般网页主体布局但凡水平居中的，其实即是对最外的DIV层设置居中构造，这时候结构居中便是咱们这里要先容枢纽点。

DIV构造程度居中，症结使用CSS单词为margin:0 auto。
告白：DIV对象外边距左右为主动适应距离（按照对象配置宽度名堂踊跃武断浏览器裁撤配置宽度后剩下宽度支配主动对等自然就实现构造居中），高下间距为0px。

关键实例CSS代码：

body{ text-align:center}
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F}

起首对body配置个css模式居中，尽管也是为了兼容各大阅读器默认环境下模式为居中初始设置装备摆设，若何再对需要居中的决议器设置装备摆设构造居中(margin:0 auto)，固定宽度设置为500px，高度100px，CSS边框为1px蓝色实线边框。

这里设置装备摆设500px宽度是任意设置，实际机关中依照需求设置装备摆设，为了看到DIV被居中构造，所以参与高度和边框，以便观察到静止宽度居中实例成果。

实例残缺HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIVCSSS5实例</title>
<style>
body{ text-align:center}
.box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F}
</style>
</head>
<body>
<div class="box">CSS5静止宽度居中实例</div>
</body>
</html>

大家大概直接拷贝代码保管就可察看实例成效。

实例成效截图

DIV+CSS固定宽度居中实例效果截图 DIV+CSS静止宽度居中实例成就截图

在CSS5网给大家介绍过良多篇对付布局居中文章教程，实际上最枢纽CSS代码即是margin:0 auto，这里需要特别注明是，各人要让对象布局居中，那么就定然不要运用float浮动名堂，要是设置对象float浮动格局，这个时刻不论设置margin:0 auto样式还是没有配置，对象都不会机关居中，由于最根蒂逻辑就是舛讹的，即设置居中又配置浮动靠左或靠右展示是错误的。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s51869.shtml