前端网页如何使块内文字显示在正中间

coderzjy

已于 2025-01-23 00:32:38 修改

阅读量466

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端学习日记文章标签： html5 css html css3

于 2025-01-20 00:15:17 首次发布

本文链接：https://blog.youkuaiyun.com/codezjy/article/details/145250263

前端学习日记专栏收录该内容

6 篇文章

订阅专栏

目标效果：

我们只在css中设置text-align:center 只能让文字左右居中，要实现文字垂直方向也达到居中的效果，我们可以再设置一个line-height,让行高等于块的高度即可

下面附上上图实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词</title>
    <style>
        a {
            background-color:#3064bb;
            text-align: center;
            line-height: 80px;
            width: 200px;
            height: 80px;
            font-size: 18px;
            color: white;
            display: block;
            text-decoration: none;
        }
        a:hover{
            background-color: #608dd9;
        }
    </style>
</head>
    <body>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaScript</a>
        <a href="#">Vue</a>
        <a href="#">React</a>
    </body>
</html>