设置水平和垂直居中有哪几种方法
- 2017-04-16 10:27:59
- 4,850 次阅读
- 3
在做网站布局时,很多情况下要实现元素区块的水平或垂直居中。但有时设置了居中的方法并不起作用,这可能是我们对css居中的知识没有完全掌握。css的居中有多种方式,下面就具体介绍。
1.水平居中
(1)文本、图片等行内元素的水平居中
直接给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。
(2)确定宽度的块级元素的水平居中
通过设置margin:0 auto实现水平居中
(3)不确定宽度的块级元素的水平居中
三种方式可以实现不确定宽度的块级元素水平居中
方法一:使用table标签间接实现内部元素区块的水平居中
非常有趣的是table本身并不是块级元素,如果不设置宽度,它的宽度就由内部元素决定,只要给table设置margin:0 auto就可以实现水平居中,从而间接达到内部元素的水平居中。但这种方法缺点是增加了无语义标签,加深了标签的嵌套层数。
方法二:转化块级元素的类型
通过使用display将block类型的元素转化为inline类型的元素,然后使用text-align来实现水平居中。与方法一相比,它的好处是不用增加无语义标签,简化了标签的嵌套层次。但转化后的行内元素比块级元素缺少了某些功能,比如长宽值设置无效。
方法三:利用浮动和相对定位来实现水平居中
首先给父元素设置float并设置position:relative和left:50%,然后给子元素设置position:relative和left:-50%来实现水平居中。
这种方法的优点是不会改变块级元素的类型,并且不会添加无语义标签,,不会增加嵌套层次;缺点是设置了position:relative,带来一定的副作用。
这三种方法使用比较多,各有优缺点,具体选用哪种方式可以视情况而定。
2.垂直居中
(1)父元素高度不确定的文本、图片、块级元素的垂直居中
通过给父容器设置相同上下内边距来实现垂直居中。
(2)父元素高度确定的单行文本的垂直居中
通过给父元素设置height和line-height来实现垂直居中,注意高度值和行高值相同。
(3)父元素高度确定的多行文本、图片、块级元素的垂直居中
css中有一个用于垂直居中的属性vertical-align:middle,只有将元素转化inline-block类型才能生效。但td标签默认情况下就隐式地设置了vertical的值为middle,所以不需要再显示地设置一次。
文章评论 (0)