-
123456
查看全部 -
13123
查看全部 -
小毅哥牛逼查看全部
-
垂直居中布局实现方式
1、table-cell+vertical-algin
2、absolute+transform
查看全部 -
两列布局(一列定宽、一列自适应)
1、float+margin
2、float+overflow
3、display的table属性
查看全部 -
.parent{ text-align: center; } .child{ display:inline-block }
<div class=".parent"> <div class=".clid"> test </div> </div>
优点:兼容性好;缺点:子级元素会继承父级的text-align
-------------------------------------------------------------
.child{ width: 300px; display: block; */ display: table */ margin:0 auto }
优点:只需要改动子级元素;缺点:当子级元素脱离文档流以后,margin失效
-----------------------------------------------------------------------
.parent{ position: relative } .child{ position: absolute; left: 50%; transform: translateX(-50%) }
查看全部 -
水平居中的第一种实现方案
查看全部 -
text-align属性查看全部
-
水平居中方式(3)
position:absolute;+transform:translatX(px\%);
优点:父级元素是否脱离文档流,不影响子级元素水平居中效果。
缺点:transform属性是CSS3中新增属性,浏览器支持情况不好。
查看全部 -
水平居中方式(2)
display:block(table);+margin:0 auto;
优点:只需要对子级元素进行设置就可以实现水平方向居中布局效果。
缺点:如果子级元素脱离文档流(浮动(float)、绝对定位(absolute)、固定定位(fixed)),会导致margin属性的值无效。
查看全部 -
水平居中方式(1)
text-align:center;+display:inline-block;
优点:方法比较成熟,兼容性好。
缺点:text-align对齐属性会继承,使所有子级元素文本水平居中。
解决方法:在子级元素中重新设置text-align覆盖继承值。
查看全部 -
大多数都是自问自答不解释。又没有实际开发例子做比较。查看全部
-
左右定宽。中间自适应。三行三列的布局。
查看全部 -
三列布局method
查看全部 -
第二种布局
查看全部
举报