左右布局
左右布局只要使左边的块级元素向左浮动,右边的向右浮动即可。但要记得因为子元素浮动会造成父元素的高度坍塌,所以需要在父元素上使用.clearfix:after
清除浮动。
左中右布局
左中右布局比左右布局多了中间一个元素,那么就只能全部向左浮动了。这里为了演示令三个元素拥有同样的宽度,实际使用需要根据内容添加margin
。同样需要为父元素清除浮动。
水平居中
-
内联元素
水平居中-内联.jpg
要使内联元素居中,为父元素添加text-align:center
即可。
-
块级元素
-
不固定宽度
水平居中-块级-不固定宽.jpg
要使不固定宽度的块级元素居中,需要为父元素添加左右相等的padding
。
-
固定宽度
水平居中-块级-固定宽.jpg
要使固定宽度的块级元素居中,让这个元素自动计算水平方向的margin
的值即可,左右margin
值会相等。
垂直居中
- 内联元素
要使内联元素垂直居中,需要为父元素添加上下相等的padding
。
垂直居中-内联.jpg
- 块级元素
块级元素的垂直居中复杂一些,需要使用绝对定位,使它自己的顶部距离父元素顶部50%
的距离,再使用tranform: translateY(-50%)
使它自己向上缩进自身高度的50%
以实现视觉上的居中。
垂直居中-块级.jpg
网友评论