为什么标题不在中心？

Question

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

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

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

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

可以告诉我一些错误或遗失的建议吗？

Answer 1

在它周围放一个div。 <{1}}标记无法居中。

<b>

body {
  text-align: center;
}

main {
  text-align: left;
}

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

Answer 2

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

text-align property说：适用于：阻止容器。

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

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

• 查找（或添加）作为块容器的祖先元素
• 更改<b>（使用CSS display属性）以使其成为块
• 将<b>替换为另一个阻止的元素。

在这种情况下，最合适的事情是替换<b>。

您应该选择基于描述 内容的标记，而不是它应该是什么样的。 （自1996年CSS 1发布以来，这已经成为现实，并开始将网页中的样式与结构分开）。

你一直在调用元素＆＃34;标题＆＃34;。 HTML提供专门用于此目的的元素。

除the <header> element本身外，还有<h1> - <h6> heading elements。

您的内容使其看起来像<h1>是合适的。

＆＃13;

＆＃13;

h1 {
  text-align: center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 3

header似乎是一个更好的标签，用于组合“介绍性或导航辅助工具......标题元素，还有其他元素，如徽标，搜索表单等。”，documentation at MDN。

main更适合“内容...文档独有，不包括在一组文档中重复的任何内容，如侧边栏，导航链接，版权信息，网站徽标和搜索表单（除非文档的主要功能是搜索表单）。“，documentation at MDN。

要明确，text-align属性由子元素documentation at 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>

Answer 4

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

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

另一个解决方案就是

display: block

b元素。

Answer 5

您无法对齐b标记内容。

只需像这样改变你的jsfidle。

HTML

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

和css

p{
  text-align:center !important;
}