CSS如何设置div水平居中
时间:2021-05-07 来源:互联网
今天PHP爱好者为您带来CSS设置div水平居中的方法:1、给div元素设置“margin: 0 auto”样式;2、在父级div元素里设置“text-align: center”样式,在子一级div元素里设置“display: inline-block”样式。希望对大家有所帮助。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、外边距自适应
方式:元素绑定属性:margin: 0 auto;
<p class="p-parent">
<style>
.p-parent {
width: 400px;
background-color: #aaa;
}
.p-child {
width: 100px;
background-color: #007FFF;
margin: 0 auto;
}
</style>
<p class="p-child"></p>
</p>
效果:
注意:常用,适用于已知父级元素宽度的情况
2、行内块元素
方式:父级元素设置属性:text-align: center;
子一级元素设置属性:display: inline-block;
<p class="p-parent">
<style>
.p-parent {
width: 400px;
background-color: #aaa;
text-align: center;
}
.p-child {
width: 100px;
background-color: #007FFF;
display: inline-block;
}
</style>
<p class="p-child"></p>
</p>
效果如图:
注意:inline-block存在浏览器兼容性问题,另行处理因设置inline-block带来的副作用。
补充:使用定位
方式:父级元素设置属性:position: relative;
子一级元素设置属性:position: absolute;
<p class="p-parent">
<style>
.p-parent {
width: 400px;
background-color: #aaa;
position: relative;
}
.p-child {
width: 80px;
background-color: #007FFF;
position:absolute;
left: 40%;
}
</style>
<p class="p-child"></p>
</p>
效果如图:
注意:适用于父级元素宽度已知的情况,居中定位自己设置比较麻烦。
以上就是CSS如何设置p水平居中的详细内容,更多请关注php爱好者其它相关文章!
-
关于神舟精盾K460N电脑的一键U盘启动(神舟精盾k460n-i3 d1) 2025-06-27
-
U盘启动中对内存的诊断方法(u盘启动数据还在吗) 2025-06-27
-
U盘升级win7系统时出现蓝屏故障怎么办?(u盘从装win7系统) 2025-06-27
-
U盘的禁用与启动设置(禁用u盘命令) 2025-06-27
-
如何利用U盘启动盘破解电脑开机密码(如何通过u盘启动) 2025-06-27
-
怎么在PE系统里面固定U盘盘符(怎么在pe系统里安装软件) 2025-06-27