为什么标题不在中心?

我希望段落的标题居中，但我无法让它工作。

整个段落和段落具有属性text-align:left，标题具有text-align:center但仍然没有居中。

body{
text-align:center;
}
main{
text-align:left;
}
b{
text-align:center !important;
}

<main>
<b>Header:</b>  
</main>

索蒙能给我一些建议，我做错了什么或错过了什么吗？

在它周围放一个div。<b>标记不能居中。

body {
text-align: center;
}
main {
text-align: left;
}
.header {
text-align: center !important;
}

<main>
<div class="header">
<b>Header:</b>
</div>
</main>

默认情况下display: inline<b>元素。

text-align属性说：适用于：块容器。

因此，默认情况下，它对<b>元素没有影响。

您需要将其应用于块容器。有三种方法可以做到这一点：

在这种情况下，要做的专有方法是更换<b>.

您应该选择基于标记来描述内容是什么，而不是它应该如何看起来。(自 1996 年 CSS 1 发布并开始在网页中将样式与结构分离的过程以来，情况一直如此(。

您一直在称该元素为"标头"。HTML 提供了专门用于此目的的元素。

除了<header>元素本身之外，还有<h1>-<h6>标题元素。

您的内容使它看起来像一个合适的<h1>。

h1 {
text-align: center;
}

<main>
<h1>Header</h1>
</main>

您还可以删除!important标志。它通常比它的价值更麻烦，并且在这里没有任何好处。

header似乎是一个更好的标签来分组"介绍性或导航辅助工具......标题元素，以及其他元素，如徽标，搜索表单等。

main更适合"内容...文档唯一，不包括在一组文档中重复的任何内容，例如侧边栏，导航链接，版权信息，站点徽标和搜索表单(除非文档的主要功能是作为搜索表单(。

需要明确的是，text-align属性是由子元素继承的，MDN的文档。

也就是说，请考虑以下代码：

body{
text-align: center;
}
header{
text-align: left;
}
h1{
text-align: center;
}

<header>
<h1>Header:</h1>
<p>Content in a paragraph (should be left aligned, inheriting from `header`)</p>
</header>

一个简单的解决方案可能是使用定位。像这样：

body {
text-align:center;
position: relative;
}
main {
text-align:left;
}
b {
position: absolute;
left: 45%;
}

另一种解决方案是

display: block

b元素。

不能对齐 b 标签内容。

只需像这样更改您的jsfidle即可。

.html

<main>
<p><b>Header:</b></p> 
</main>

和 CSS

p{
text-align:center !important;
}

相关内容