-
margin :auto实现水平居中
查看全部 -
inline-block + text-align 实现水平居中的优点
查看全部 -
水平 水平居中布局的三种实现方式
查看全部 -
太贵了。就这么讲下都48块钱。。坑货查看全部
-
水平方向直接margin auto就行,不需要table查看全部
-
这里不需要设置display为table/block也行,直接margin:auto即可。查看全部
-
一旦子级元素脱离文档流后,使用dispaly:table margin: 0 auto 的居中对齐方式将 失效
查看全部 -
居中布局的核心在于父级元素变为行内块属性,使用dispaly:inline-block;
子级元素使用text-align:center;
查看全部 -
优点:
- 无论父级元素是否脱离文档流,都不影响子级元素水平居中效果。
缺点:
- transform属性是CSS3中新增的属性,浏览器支持情况不好
查看全部 -
当把当前元素设置为绝对定位之后:
- 如果父级元素没有开启定位:当前元素是相对于页面定位的。
- 如果父级元素开启了定位:当前元素是相对于父级元素定位。
怎么给父级元素开启定位?
- 将父级元素的position属性设置为relative/fixed/absolute
查看全部 -
脱离文档流的三种方法:
- 设置浮动 float
- 绝对定位 absolute
- 固定定位 fixed
查看全部 -
优点:
只需要对子级元素进行设置就可以实现水平方向居中布局效果。
缺点:
如果子级元素脱离文档流,导致margin属性的值无效。
查看全部 -
margin:
查看全部 -
第二种解决方案:
<div class="parent"> <div class="child">慕课网</div> </div>
通过以下css实现水平方向居中布局效果:
.child{ display: table; /*table 或 block*/ margin: 0 auto; }
查看全部 -
优点:
- 浏览器兼容性比较好。
缺点:
- text-align 属性具有继承性,导致子级元素的文本也是居中显示的。
查看全部
举报