HTML字体应用line-height仍不可垂直居中解决方案

最新推荐文章于 2022-06-29 23:08:41 发布

云南仟龙Mark

最新推荐文章于 2022-06-29 23:08:41 发布

阅读量344

点赞数

文章标签： css html html5

原文链接：https://blog.51cto.com/u_15111999/3750233

版权

本文探讨了在HTML中使用line-height属性无法实现垂直居中的问题，并提供了一个实例。当line-height与font同时声明时，line-height可能会失效。通过修改代码，将line-height与font结合或者单独使用line-height，可以成功实现文本垂直居中。这个解决方案对于前端开发者在布局和样式设计时具有参考价值。

摘要由CSDN通过智能技术生成

今天跟大家聊聊HTML字体应用line-height仍不可垂直居中解决方案，原文中根据实例编码介绍的特别详尽，对我们的学习或是工作中具备一定的参照学习使用价值，需要了解的朋友们下边随着云南仟龙Mark来一起学习学习吧！

以HTML字体应用line-height仍不可垂直居中解决方案_html图片所示的效果为例，显然我们不仅要使“下一步”文本水平居中，还要垂直居中，此时我们写代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #next-button{
                    height: 54px;
                text-align: center;
                color: #fff;
                background: #e2231a;
                line-height: 54px;
                font:16px "Microsoft YaHei","Hiragino Sans GB";
                cursor: pointer;
                margin: 0 auto;
                width:400px;
            }
             
        </style>
    </head>
    <body>
        <div id="next-button">下一步</div>
    </body>
</html>

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

HTML字体应用line-height仍不可垂直居中解决方案_html_02我们设置的文本垂直居中并没有效果。而我们改代码为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #next-button{
                width:400px;
                height: 54px;
                text-align: center;
                     <http://www.qlyl1688.com/>color: #fff;
                background: #e2231a;
                font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
                cursor: pointer;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="next-button">下一步</div>
    </body>
</html>