时间戳

首页 > 解决方案 > 为什么我可以将标题放在中心。但不能把标题孩子放在中心？

html - 为什么我可以将标题放在中心。但不能把标题孩子放在中心？

问题描述

我有这个 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Test Project</title>
</head>
<body>
    <header>
        <h1>MarioClub</h1>
    </header>
</body>
</html>

使用这个 css 模块：

header {
    text-align: center;
    position: fixed;
    width: 100%;
    color: black;
    background: yellow;
    border-width: medium;
    border-color: black;
    z-index: 1;
    top: 0;
    left: 0;
}

header h1 {
    /*text-align: center;*/
    padding: 10px 10px;
    border: 8px solid black;
    display: inline-block;
}

当我把“文本对齐：中心；” 进入“标题”选择器，它也可以工作。但是当我从标题中删除它并添加到“标题 h1”选择器时，文本对齐不起作用。为什么它不起作用？

我认为它必须反过来工作，因为我想把“h1”的文本放在中心，但不是所有的“标题”文本。

当我把 text-aling 放到 当我将文本添加到“标题”选择器时，它的工作原理是这样的

当我把它放进去时就像这样 当我将它放入“header h1”选择器时就像这样

标签： htmlcss

解决方案

因为 inline-block 没有获得完整的父宽度，所以，虽然它的文本是居中的，但它似乎不是这样。只需使用浏览器检查器检查 h1 元素，然后查看两种情况的区别。

推荐阅读