Margin 居中 | 学习笔记

简介: 快速学习 Margin 居中。

开发者学堂课程【CSS 快速掌握Margin 居中】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9195


Margin 居中


内容介绍

一、内容简介

二、属性用法

三、注意点


一、内容简介

Margin 的值可以是 auto,当左外边距与右外边距的值都是 auto 时,那么这个盒子就会水平居中

Margin 用法:

Margin-leftauto/*左外边距*/

Margin-rightauto/*右外边距*/

Margin-top100px/*上外边距100像素*/

Margin-bottom100px/*下外边距100像素*/

 

二、属性用法

Margin-bottom:100px auto

 

三、注意点

1. 使用 margin 来实现水平居中时,一定要有固定的宽度(给这个盒子设置一个宽度)只有块元素可以实现水平居中,行内元素不能实现居中

/*如果这个元素没有设置固定的宽度,那么这个元素就会占据其父元素的100%宽度*/

2.只有标准文档流中的盒子才可以使用 margin 来实现水平居中

比如:floatleft/*像左浮动*/(这个用上 margin 就不可能居中)

3.margin 属性是用来实现盒子的水平居中,而不是文本的水平居中

相反属性:

text-align 这个属性是用于实现文本的水平居中,值为 center 表示文本水平居中,不能实现盒子水平居中

text-aligncenter/*只能实现文本水平居中*/

margin20px auto/*只能实现元素的水平居中*/

相关文章
|
1月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
142 57
|
1月前
|
前端开发
前端:行内元素的 margin 和 padding
在前端开发中,行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示,不会占据独立的空间。对于行内元素而言,其外边距(margin)和内边距(padding)的设置有特定规则:垂直方向上的外边距和内边距不会影响其他元素,但水平方向的则会增加元素的宽度,可能会影响相邻元素的位置。合理设置这些属性,可以有效控制页面布局与间距。
|
4月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
47 0
垂直居中 #32
垂直居中 #32
44 0
超级居中
超级居中
79 0
超级居中
|
前端开发
盒子模型 边框border 外边距 内边距
盒子模型 边框border 外边距 内边距
256 0
盒子模型 边框border 外边距 内边距
|
前端开发 开发者
margin | 学习笔记
快速学习 margin。
170 0
|
前端开发
span内文字居中css布局方法_让span内容居中
display:block,让span形成块(独占一行),就像DIV一样,在设置内容居中css text-align:center。
2763 0
|
Web App开发 前端开发 iOS开发