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

Эй, вам нужно удалить float: left из .exp-image h3 в css

/*--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 2

Вы можете:

Удалить float:left; из h3.

И добавить этот CSS к изображению, чтобы оно также центрировалось:

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

Даёт это:

Answer 3

дают h3 и p ширину: 100% и выравнивание текста: по центру.Ширина 100% устанавливает ширину в размере родительского контейнера (div).