CSS如何让单行文字垂直居中

最新推荐文章于 2024-07-31 16:33:26 发布

诺坎普的风间

最新推荐文章于 2024-07-31 16:33:26 发布

阅读量563

点赞数

分类专栏：前端只因变凤凰之路文章标签： css3 前端 css css让单行文字垂直居中单行文字垂直居中 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129458746

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS如何让单行文字垂直居中。知识学习内容来自b站的 @黑马程序员的视频

先看一个案例了解什么是单行文字垂直居中

如上图，健康儿童二字在一行中的高度很明显是贴到顶部了，而我们想要的效果应该是这样

那么具体该如何实现上述效果呢？其实方法很简单，只需要将行高等于它所在的盒子高度即可。当然这里我们使用了元素显示的转换，即让a标签转换为块元素而不是行内元素。下面给出前后对比的代码

第一种代码

<!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>
        /* 1 把链接a转换为块元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            text-decoration: none;
            color: white;
            background-color: #55585a;
            text-indent: 2em;
            font-size: 14px;
            /* line-height: 40px; */
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机音响</a>
</body>

</html>

第二种代码

<!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>
        /* 1 把链接a转换为块元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            text-decoration: none;
            color: white;
            background-color: #55585a;
            text-indent: 2em;
            font-size: 14px;
            line-height: 40px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机音响</a>
</body>

</html>

以上就是如何让单行文字垂直居中的小技巧啦~