使标题居中对齐

Question

How to center <h3> in the following code?

h1 {
  color: #666;
  margin: 20px 10px 0px;
  padding: 0px 30px 0px 30px;
  text-align: center;
}

h3 {
  color: #ccc;
  background-color: black;
  margin: 0px;
  padding: 10px 10px 10px 10px;
  text-align: center;
  display: inline-block;
}

<div>
    <h1>title 1</h1>
    <h3>title 3</h3>
</div>

FIDDLE

- tanaan

Answer 1

只需将此css属性应用于div，即 text-align:center;

像这样

<div style="text-align:center;">
    <h1>title 1</h1>
    <h3>title 3</h3>
</div>

这是个例子：https://jsfiddle.net/egv269x0/

- Giulio Bambini

---

谢谢回复。你有没有碰巧在回答之前读过之前的消息？这已经说过了。谢谢。 - tanaan

我认为这是更简化的方法和易于理解的解决方案。无需指定类并编写单独的 CSS 代码。 - Giulio Bambini

Answer 2

您应该给<div>添加一个类，并对<div>进行样式设置。

当前，您的<div>像父元素一样。设置text-align: center。

示例：

h1{
  color: #666;
  margin: 20px 10px 0px;
  padding: 0px 30px 0px 30px;
}

 h3 {
  color: #ccc;
  background-color: black;
  margin: 0px;
  padding: 10px 10px 10px 10px;
  display: inline-block;
}

.center {
  text-align: center;
}

<div class="center">
        <h1>title 1</h1>
        <h3>title 3</h3>
 </div>
 

- Ave

---

谢谢，伙计，那个东西完成了任务。 - tanaan

Answer 3

你可以将它放在一个div中，并添加样式text-align: center。 :)

- Kris

---

有人之前说过同样的话。无论如何还是谢谢。 - tanaan

Answer 4

将此css应用于h3标签：

h3 {
  color: #ccc;
  background-color: black;
  margin: 0px;
  padding: 10px 10px 10px 10px;
  //text-align: center;
  display: inline-block;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

你尝试的方法行不通，因为使用display: inline-block;时，元素不再是全宽，而text-align: center;会根据元素的宽度居中文本。

- Alin N

---

这也可以工作！与@varioc提供的有什么区别？非常感谢。 - tanaan

Answer 5

如果您想将标题3居中： 在CSS中不需要使用display: inline-block;。

- Victor Rocheron

---

请保持黑色背景不变，不要占用整个窗口宽度。非常感谢。 - tanaan