如何将段落放在html中的标题标签下并将段落居中

Question

.aboutPageStatsHead {
  margin: 3%;
  margin-top: 12%;
  clear: both;
  color: #29aae2;
  font-size: 3.2em;
  display: inline-block;
}

.aboutPageStatsHeadNext {
  margin-left: 10%;
}

<div id="aboutUsStatsDiv">
  <h3 id="aboutUsStatsDiv1" class="aboutPageStatsHead">20</h3>
  <h3 id="aboutUsStatsDiv2" class="aboutPageStatsHead aboutPageStatsHeadNext">56</h3>
  <h3 id="aboutUsStatsDiv3" class="aboutPageStatsHead aboutPageStatsHeadNext">3</h3>
  <h3 id="aboutUsStatsDiv3" class="aboutPageStatsHead aboutPageStatsHeadNext">3</h3>
</div>

我希望它看起来像这样，但是无论如何我都无法将标题下的文本向右移动，它的右边距不能比标题大。

Answer 1

您可以将它们包装在div中，并将p和h3都放在该div中

.aboutPageStatsHead {
  margin: 3%;
  margin-top: 12%;
  color: #29aae2;
  display: inline-block;
}

.aboutPageStatsHead h3 {
  font-size: 3.2em;
  text-align: center;
}

.aboutPageStatsHead p {
  text-align: center;
}

<div id="aboutUsStatsDiv">

  <div class="aboutPageStatsHead">
    <h3>20</h3>
    <p>Years in Business</p>
  </div>

  <div class="aboutPageStatsHead">
    <h3>56</h3>
    <p>Years in Business</p>
  </div>

  <div class="aboutPageStatsHead">
    <h3>3</h3>
    <p>Years in Business</p>
  </div>

  <div class="aboutPageStatsHead">
    <h3>3</h3>
    <p>Years in Business</p>
  </div>

</div>

这将使段落与标题始终居中对齐，因为它们都相对于新div居中对齐。

然后，您可以通过新的div（而不是标题本身）来控制边距。