当我们缩小浏览器窗口的时候,会发现页面都是在浏览器居中位置现显示的。
外边距可以让块级盒子水平居中显示,但是必须满足两个条件:
- 盒子必须指定了宽度(width)
- 盒子左右的外边距都设置为auto
语法:
.header {
width: 300px;
margin: 0 auto;
}
宽度为300像素,上下外边距为0,左右外边距自动居中。
常见写法如下:
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
注意点
以上方法是让块级元素水平居中。如果要让行内元素或者行内块元素水平居中,只要给其父元素添加 text-align:center即可。
版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!
转载请注明:转载于37.2度云笔记