我需要帮助将文本放在几张图片下面。由于某种原因,文本偏离了几个。 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>
答案 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)