详解HTML中字体使用line-height依然不能垂直居中解决办法

最新推荐文章于 2024-01-15 15:47:03 发布

wangjinjin180

最新推荐文章于 2024-01-15 15:47:03 发布

阅读量477

点赞数

本文链接：https://blog.csdn.net/wangjinjin180/article/details/110288778

版权

以图片所示的效果为例，显然我们不仅要使“下一步”文本水平居中，还要垂直居中，此时我们写代码如下：

在其中，我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中，然而，我们却得到了这样的效果：

我们设置的文本垂直居中并没有效果。而我们改代码为

下一步

的时候，就可以垂直居中。原因就在于如果样式声明列表中有line-height与font，则line-height无效，必须与font一起使用。只要样式声明中没有font，就可使用line-height来设置文本的垂直居中了。 http://www.xccinema.net/wangyezhizuo/HTMLXhtml/6.html