【html】html常见标签的居中问题

贺情

已于 2022-05-17 20:56:08 修改

阅读量1.2w

点赞数 2

于 2022-04-15 23:03:12 首次发布

本文链接：https://blog.csdn.net/m0_50947589/article/details/124204961

版权

居中的类型

HTML中的标签大致可以分为：行标签、块标签和行块标签。

居中分为水平居中和垂直居中，垂直居中对于文字元素而言使用的比较多，水平居中的适用范围更广，几乎HTML标签都有可能有水平居中的要求。

居中的方法

首先说明一下如何让文字元素垂直居中，其实很简单，只需要让line-height和height的值相等就可以了。

代码示例：

<!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>blog</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            margin: 50px;
            width: 150px; 
            height: 50px;
            line-height: 50px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div>

最低0.47元/天解锁文章

贺情

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
【html】html常见标签的居中问题

居中的类型HTML中的标签大致可以分为：行标签、块标签和行块标签。居中分为水平居中和垂直居中，垂直居中对于文字元素而言使用的比较多，水平居中的适用范围更广，几乎HTML标签都有可能有水平居中的要求。居中的方法首先说明一下如何让文字元素垂直居中，其实很简单，只需要让line-height和height的值相等就可以了。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charse
复制链接

扫一扫