首页 > 代码库 > DIV CSS固定宽度居中实例

DIV CSS固定宽度居中实例

2024-08-06 12:14:19   222人阅读

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

在布局一个网页时，非常重要的是一般网页主体布局都是水平居中的，其实就是对最外的DIV层设置居中布局，这时布局居中就是我们这里要介绍关键点。

DIV布局水平居中，关键使用CSS单词为margin:0 auto。
解释：DIV对象外边距左右为自动适应距离（根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中），上下间距为0px。

关键实例CSS代码：

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

首先对body设置个css内容居中，当然也是为了兼容各大浏览器默认情况下内容为居中初始设置上海看性病，如何再对需要居中的选择器设置布局居中(margin:0 auto)，固定宽度设置为500px，高度100px，CSS边框为1px蓝色实线边框。

这里设置500px宽度是任意设置，实际布局中根据需求设置，为了看到DIV被居中布局，所以加入高度和边框，以便观察到固定宽度居中实例效果。

实例完整HTML代码：

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head> 
    4. <meta charset="utf-8" /> 
    5. <title>DIVCSSS5实例</title> 
    6. <style> 
    7. body{ text-align:center} 
    8. .box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F} 
    9. </style> 
    10. </head> 
    11. <body> 
    12. <div class="box">DIVCSS5固定宽度居中实例</div> 
    13. </body> 
    14. </html> 

大家可以直接拷贝代码保存即可观察实例效果。

实例效果截图

DIV+CSS固定宽度居中实例效果截图
DIV+CSS固定宽度居中实例效果截图

在DIVCSS5网给大家介绍过很多篇关于布局居中文章教程，其实最关键CSS代码就是margin:0 auto，这里需要特别说明是性治疗师，大家要让对象布局居中，那么就一定不要使用float浮动样式，如果设置对象float浮动样式，这个时候无论设置margin:0 auto样式还是没有设置，对象都不会布局居中，因为最基本逻辑就是错误的，即设置居中又设置浮动靠左或靠右显示是错误的。

DIV CSS固定宽度居中实例


联系
我们