即使我使用了'text-align：center'，我也无法对齐我的标题答案

【问题标题】：I can't align my header even though I have used 'text-align: center'即使我使用了'text-align：center'，我也无法对齐我的标题
【发布时间】：2021-12-06 03:03:02
【问题描述】：

嘿，我是 html 新手。我的问题是我无法让我的 h3 标题对齐。 h3 标题在我的正文中，其中包含以正文为中心的 css 代码。它向左对齐，但它应该与中心对齐。我已经保存了 html 和 css 文件并刷新了我的浏览器。这是html代码：

<body>
    
    
    <h1> 
        Blessed Be Blessings
    </h1>

<p class="width"> Hey there. What's up?</p>
<br>
<h3>Titanium Steel</h3>

<img src="file:C:/Users/Tam/Desktop/1.jpg">
  

</body>

这是css：

body{background-color: powderblue;}

p{color: white;}



body {text-align: center;}

h1 {border: solid 5px; background-color: white;}
h3{border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple;}

【问题讨论】：

尝试边距：0px auto;或显示：内联块；在 H3 上。
这能回答你的问题吗？ Make heading center align

标签： html text-align

【解决方案1】：

h3 是一个块类型标签。当您使用width 时，它与其200px 空间对齐，但不与主体对齐。所以你必须使用

h3 {
    margin:0px auto 
}

【讨论】：

【解决方案2】：

显示：内联块；

body{background-color: powderblue;}

p{color: white;}



body {text-align: center;}

h1 {border: solid 5px; background-color: white;}
h3{border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple;display:inline-block;}

<body>
    
    
    <h1> 
        Blessed Be Blessings
    </h1>

<p class="width"> Hey there. What's up?</p>
<br>
<h3>Titanium Steel</h3>
<br>
<img src="https://placekitten.com/640/360">
  

</body>

【讨论】：

【解决方案3】：

您可以将 h3 包装在一个 div 中，并使该 div 成为一个 flexbox。

请看下面的例子

p {
  color: white;
}

body {
  text-align: center;
}

h1 {
  border: solid 5px;
  background-color: white;
}

h3 {
  border-radius: 30px 30px 30px 30px;
  padding: 40;
  width: 200px;
  background-color: purple;
  text-align: center;
}

.center-h3 {
  width: 100%;
  display: flex;
  justify-content: center;
}

<h1>
  Blessed Be Blessings
</h1>

<p class="width"> Hey there. What's up?</p>
<br>
<div class='center-h3'>
  <h3>Titanium Steel</h3>
</div>

【讨论】：

【解决方案4】：

body {
  background-color: powderblue;
}

p {
  color: white;
}

body {
  text-align: center;
}

h1 {
  border: solid 5px;
  background-color: white;
}

h3 {
  border-radius: 30px 30px 30px 30px;
  padding: 40;
  width: 200px;
  background-color: purple;
  margin-left: auto;
  margin-right: auto;
}

<body>

  <h1>
    Blessed Be Blessings
  </h1>

  <p class="width"> Hey there. What's up?</p>
  <br>
  <h3>Titanium Steel</h3>

  <img src="file:C:/Users/Tam/Desktop/1.jpg">

</body>

【讨论】：

该代码似乎将所有内容都对齐到中心。我没有看到这个问题。

【解决方案5】：

您可以使用 margin-left 属性来居中。

body {
  background-color: powderblue;
  text-align: center;
}

p {
  color: white;
}

h1 {
  border: solid 5px;
  background-color: white;
}
h3 {
  margin-left: 40%;/*This value can be adjusted */
  border-radius: 30px 30px 30px 30px;
  /*padding: 40;*No padding unit provided so it will not make any changes*/
  width: 200px;
  background-color: purple;
}

<body>

  <h1>
    Blessed Be Blessings
  </h1>

  <p class="width"> Hey there. What's up?</p>
  <br>
  <h3>Titanium Steel</h3>

  <img src="file:C:/Users/Tam/Desktop/1.jpg" alt="img">

</body>

【讨论】：