html单行文本垂直居中

最新推荐文章于 2022-04-14 17:17:50 发布

谢诗谦

最新推荐文章于 2022-04-14 17:17:50 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： css3 html

本文链接：https://blog.csdn.net/u014387696/article/details/104847970

版权

本文介绍了如何使用CSS3中的line-height属性实现HTML单行文本的垂直居中。通过设置line-height等于元素高度，可以达到垂直居中的效果。当line-height小于或大于高度时，文本会分别呈现偏上或偏下的效果。示例代码展示了不同line-height值下的文本对齐状态。

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

单行文本垂直居中，在于使用line-height

若是line-height = height 可以实现垂直居中

若是line-height < height 文字偏上

若是line-height > height 文本篇下

实验案例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>导航栏-行内块元素</title>
       <style>
       .a1{
           display: inline-block;
           width: 200px;
           height: 40px;
           background-color: #C0C0C0;
           text-align: center;
           text-decoration: none;
           line-height: 40px;
       }

       .a2{
           display: inline-block;
           width: 200px;
           height: 40px;
           background-color: #C0C0C0;
           text-align: center;
           text-decoration: none;
           line-he