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

时间:2018-10-18 15:42:38

标签: html css image center

我需要帮助将文本放在几张图片下面。由于某种原因,文本偏离了几个。 h3必须位于p的顶部,而h3p必须位于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>

3 个答案:

答案 0 :(得分:0)

给出h3和p宽度:100%,以及text-align:center。宽度100%将宽度设置为父容器(div)的大小。

答案 1 :(得分:0)

嘿,您需要从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>

答案 2 :(得分:0)

您可以:

float:left;中删除h3

然后,将此CSS添加到图像中,使其也居中:

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

为此:

enter image description here