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被居中布局,所以加入高度和边框,以便观察到固定宽度居中实例效果。

实例:

    CSS DIV 固定宽度居中的方法  body{ text-align:center} .box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F}    
CSS DIV 固定宽度居中的方法

登录后复制

在线运行

立即学习“前端免费学习笔记(深入)”;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3119669.html

(0)
上一篇 2025年3月29日 14:35:42
下一篇 2025年3月29日 14:35:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论