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爱好者其它相关文章!
-
如鸢新池新密探值得抽吗-董奉曹植抽卡建议 2025-09-09
-
王者荣耀星火赤壁什么时候上线-海战玩法上线时间 2025-09-09
-
偷东西的梗是什么梗?揭秘网络热梗背后的搞笑真相! 2025-09-09
-
王者荣耀星火赤壁怎么玩-星火赤壁玩法 2025-09-09
-
逸剑风云决掌门结局怎么达成-逸剑风云决掌门结局详解 2025-09-09
-
CF手游封神狂潮申公豹技能是什么-申公豹技能过关 2025-09-09