css 文字垂直居中

css 文字垂直居中css 样式中提供了 text align center 实现的是水平居中 但没有提供直接的垂直居中 具体原因不得而知 实现方式可以通过设置行高 盒子的高度 原因很好理解 行高 上缝隙 文字高度 下缝隙 而文字的高度又是固定的 上下缝隙距离是均分的 所有就会强制文字垂直居中显示了 只不过上下缝隙是没有颜色的看不见而已 举例 DOCTYPE tml htmllang en head metacharset UTF 8 metacharset UTF 8 head htmllang en

css样式中提供了text-align=center 实现的是水平居中,但没有提供直接的垂直居中,具体原因不得而知,实现方式可以通过设置行高=盒子的高度,原因很好理解,行高= 上缝隙+文字高度+下缝隙,而文字的高度又是固定的,上下缝隙距离是均分的,所有就会强制文字垂直居中显示了,只不过上下缝隙是没有颜色的看不见而已,
举例:

 
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document 
      title> <style> a { 
        width: 200px; color: white; font: normal 400 14px 'Mircosoft Yahei'; background-color: rgb(95, 94, 91); text-decoration: none; height: 50px; display: block; line-height: 50px; text-indent: 2em; } a:hover { 
        background-color: rgb(245, 141, 45); }  
       style>  
        head> <body> <a href="#">手机 电话卡 
         a> <a href="#">电视 盒子 
          a> <a href="#">笔记 本平板 
           a> <a href="#">出行 穿戴 
            a> <a href="#">健康 儿童 
             a> <a href="#">耳机 音响 
              a>  
               body>  
                html> 

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/199819.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月20日 下午12:08
下一篇 2026年3月20日 下午12:08


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号