开发者学堂课程【CSS 快速掌握:Margin 居中】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/611/detail/9195
Margin 居中
内容介绍
一、内容简介
二、属性用法
三、注意点
一、内容简介
Margin 的值可以是 auto,当左外边距与右外边距的值都是 auto 时,那么这个盒子就会水平居中
Margin 用法:
Margin-left
:auto;/*左外边距*/
Margin-right
:auto;/*右外边距*/
Margin-top
:100px;/*上外边距100像素*/
Margin-bottom
:100px;/*下外边距100像素*/
二、属性用法
Margin-bottom:100px auto;
三、注意点
1. 使用 margin 来实现水平居中时,一定要有固定的宽度(给这个盒子设置一个宽度)只有块元素可以实现水平居中,行内元素不能实现居中
/*如果这个元素没有设置固定的宽度,那么这个元素就会占据其父元素的100%宽度*/
2.只有标准文档流中的盒子才可以使用 margin 来实现水平居中
比如:float:left;/*像左浮动*/
(这个用上 margin 就不可能居中)
3.margin 属性是用来实现盒子的水平居中,而不是文本的水平居中
相反属性:
text-align 这个属性是用于实现文本的水平居中,值为 center 表示文本水平居中,不能实现盒子水平居中
text-align
:center;/*只能实现文本水平居中*/
margin
:20px auto;/*只能实现元素的水平居中*/