-
第二种垂直居中实现
查看全部 -
第一种垂直居中布局
查看全部 -
垂直居中布局解决方案
查看全部 -
第三种水平居中方法
查看全部 -
第二种解决方案
查看全部 -
第一种解决方案
查看全部 -
水平居中布局当前元素在父级元素容器中,水平方向是居中显示的
三种方案
inline-block+text-align
table+margin
absolute+transform
查看全部 -
position : absolute属性 的两种情况
当父级元素没有开启定位的话,则子级元素是相对于页面的绝对定位。
当父级元素开启了定位的话,则是相对于父级元素的。
查看全部 -
元素脱离文档流的三种方式:
float 属性
position : absolute绝对定位
position : fixed 固定定位
查看全部 -
水平居中布局方案二 : 只对子级元素设置display:block + margin : 0 auto;就可以完成水平居中布局
优点 : 只对自己设置元素就可以了
缺点 : 如果子级元素脱离文档流的话会导致margin属性失效
查看全部 -
margin属性设置:
一个值 : 表示上右下左的外边距相同
两个值 : 第一个表示上下外边距 第二个表示左右外边距
三个值 : 第一个表示上边距 第二个表示左右外边距 第三个表示下外边距
四个值 : 分别表示上右下左的边距
查看全部 -
水平居中布局 text-align:center + display:inline-block 的优缺点
1 优点 : 浏览器兼容性好
2.缺点 :子元素的文本内容会由于父级元素设置了text-align:center也居中对齐,需要在子元素中再次设置text-align属性。
查看全部 -
display:inline-block行内块元素可以设置宽高,display:inline内联元素宽高是无效的。
查看全部 -
水平居中对齐解决方案一:
text-align:center + display:inline-block实现
text-align元素最初是对文本元素设置对齐的,当元素是inline-block的时候其实是同时具备内联元素和块元素的的特征。所以text-align就有效了。
查看全部 -
居中布局 水平居中 垂直居中 水平加垂直居中
查看全部
举报