Question

如何在以下代码中居中<h3>？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

FIDDLE

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/

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>

Answer 3

将此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;根据元素的宽度居中文本

Answer 4

您可以将其放入div并添加样式text-align: center。：）

Answer 5

如果你想要标题3：它在css中没有display: inline-block;的情况下工作

使航向中心对齐

5 个答案: