Home > Article > Web Front-end > How to center text and labels in html

How to center text and labels in html

王林forward: 2020-08-29 16:30:175643browse

Implementation method:

(Recommended tutorial: html tutorial)

1. Text centering:

text-align: center;
line-height: 100px; （=height）

2. Center the label

margin: 0 auto;   其中0指的是margin-top:0

Specific code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜索论坛</title>
    <link rel="stylesheet" href="https://www.baidu.com/img/baidu_jgylogo3.gif">
    <style>
        .item1{
            height: 100px;
            width: 100px;
            background-color: red;
            text-align: center;
            line-height: 100px;
            margin: 0 auto;
        }
        .item2{
            height: 100px;
            width: 100px;
            background-color: wheat;
            text-align: center;
            line-height: 100px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div>
         <div>1111</div>
         <div>2222</div>
    </div>
</body>

</html>

The above is the detailed content of How to center text and labels in html. For more information, please follow other related articles on the PHP Chinese website!

html

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：How to clear html page cacheNext article：How to clear html page cache

See more

How to center text and labels in html

Related articles