html - 在 CSS 中向下移动标题

我正在尝试学习 HTML 和 CSS，但遇到了一个小小的绊脚石。

我有以下代码:

<!DOCTYPE html>
<html>
<head>
    <title>Testing My HTML and CSS</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        .header {
            background-color: black;
            height: 100px;
            width: 100%;
        }

        .header h1 {
            margin-top: 0;
            text-align: center;
            color: white;
            height: 100px;
            width: 100%;
        }

        .sidebar {
            background-color: #ebebeb;
            position: absolute;
            width: 200px;
            height: 100%;
        }

    </style>
</head>
<body>
    <div class="header">
        <h1>Hello, World!</h1>
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</body>
</html>

可以运行 here .

我想要 <h1>Hello, World!</h1>在 .header 的中心.我试过玩 margin-top在.header h1 , 但它移动了整个 .header .

很抱歉问这么简单的问题——我是个新手。

最佳答案

如果您不打算向标题中添加更多元素，您可以将line-height: 100px; 添加到.header h1 规则集中。就是这样...

垂直对齐可能很棘手，如果你不想乱写很多代码，这是完成它的最短方法。作为一般规则，要使文本在元素中垂直居中，只需使其行高等于元素的高度(除非您有一些填充或边距更改内容)。

关于html - 在 CSS 中向下移动标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28803227/