图片下的HTML，CSS中心H1和P

Question

我需要帮助将文本放在几张图片下面。由于某种原因，文本偏离了几个。 h3必须位于p的顶部，而h3和p必须位于img的中心

/*--Experience--*/

.experience::after {
  content: "";
  clear: both;
  display: table;
}

.exp-image {
  float: left;
  width: 50px;
  height: 50px;
  padding: 35px;
}

.exp-image h3 {
  text-align: center;
  float: left;
}

.exp-image p {
  text-align: center;
}

<!--Experience Section-->
<div class="experience">
  <div class="exp-image">
    <img src="images/Ps_Color.png" alt="">
    <h3>7</h3>
    <p>Years</p>
  </div>

  <div class="exp-image">
    <img src="images/Pr_Color.png" alt="">
    <h3>7</h3>
    <p>Years</p>
  </div>

  <div class="exp-image">
    <img src="images/Ae_Color.png" alt="">
    <h3>7</h3>
    <p>Years</p>
  </div>

  <div class="exp-image">
    <img src="images/Ai_Color.png" alt="">
    <h3>7</h3>
    <p>Years</p>
  </div>

</div>

Answer 1

给出h3和p宽度：100％，以及text-align：center。宽度100％将宽度设置为父容器（div）的大小。

Answer 2

嘿，您需要从css中的float: left中删除.exp-image h3

/*--Experience--*/
.experience::after{
    content: "";
    clear: both;
    display: table;
}

.experience{
    display: block;
    text-align: center;
}
.exp-image {
    float: left;
    display: block;
    width: 25%;
    height: 50px;
    padding: 0px;
}

.exp-image h3{
  display: block;
  width:100%;
    text-align: center;
}
.exp-image p{

    text-align: center;
}

<!--Experience Section-->
<div class="experience">
    <div class="exp-image">
        <img src="https://via.placeholder.com/50x50" alt="">
        <h3>7</h3>
        <p>Years</p>
    </div>

    <div class="exp-image">
        <img src="https://via.placeholder.com/50x50" alt="">
        <h3>7</h3>
        <p>Years</p>
    </div>

    <div class="exp-image">
        <img src="https://via.placeholder.com/50x50" alt="">
        <h3>7</h3>
        <p>Years</p>
    </div>

    <div class="exp-image">
        <img src="https://via.placeholder.com/50x50" alt="">
        <h3>7</h3>
        <p>Years</p>
    </div>

</div>

Answer 3

您可以：

从float:left;中删除h3。

然后，将此CSS添加到图像中，使其也居中：

display: block;
margin-left: auto;
margin-right: auto;

为此：