CSS文字垂直居中

嗯,内容很少,主要是不太了解CSS的同学可能会找一大堆资料,只为了为一排文字设置一个垂直居中,最后发现怎么就是找不到啊,好气对不对。这里告诉你答案。

1.line-height是行高, line-height用来定义当前元素,只作用于文字,不作用于图片.它具有继承性,设置了line-height之后,文字就会垂直居中。

2.height是高,通常height是对于某个框架或者图片来弄的,只设置height而不设置line-height会使文字从上到下布局。

3.如果设置了heightline-height但文字仍然没有垂直居中,是因为文字被内联元素包围,而内联元素没有在整个块级元素中垂直撑开导致,可以简单粗暴的将内联包围元素设置为display:block

一句话,设置line-height才是为文字设置垂直居中的正确方式,没有什么“vertical:center”这种属性。对于设置img之类的内联元素在父元素内垂直居中,有一个“vertical-align”属性,大家有时间的可以阅读以下下面这个文章:http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

你可能感兴趣的:(前端)