Question

我试图学习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。

很抱歉这么简单的问题 - 我是一个完整的新手。

Answer 1

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

垂直对齐可能很棘手，如果你不想乱用很多代码，这是完成它的最短路径。作为一般规则，要将文本垂直居中放入元素，只需使其行高等于元素的高度（除非您有一些填充或边距更改的东西）。

Answer 2

请尝试demo

或者你可以尝试使用

.header{
line-height:3;
   }

Answer 3

使用line-height代替如下：

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

在CSS中向下移动标题

3 个答案: