我想排列图像水平和直接在这些图像下我想申请文本,我会怎么做呢?如何在文本上堆叠图像?
这就是我在上次尝试中尝试过的,至今......没有运气!
我也使用引导程序,并在轨道应用程序的红宝石做这个样式,如果有帮助。谢谢!
HTML
<div class="our-story-pt-5">
<div class="container">
<h4>Our services include</h4>
<div class="row">
<ul>
<li>
<img class="img-responsive" src="img-1.jpg">
<p>Creative and Technology Strategy</p>
</li>
</ul>
<li>
<img class="img-responsive" src="img-2.jpg">
<p>Digital Product Development</p>
</li>
<li>
<img class="img-responsive" src="img-3.jpg">
<p>Technology Integration</p>
</li>
<li>
<img class="img-responsive" src="img-4.jpg">
<p>System Validation</p>
</li>
<li>
<img class="img-responsive" src="img-5.jpg"><br>
<p>Sustained Support and Enhancement</p>
</li>
</ul><!-- end ul -->
</div><!-- end div.row -->
</div><!-- end div.container -->
</div><!-- end div.our-story-pt-5 -->
CSS
div.our-story-pt-5 ul{
list-style: none;
text-align: center;
padding: 0px;
}
div.our-story-pt-5 li{
list-style-type: none;
color: #284179;
text-align: left;
line-height: 40px;
font-size: 22px;
display: inline;
width: 20%;
padding: 0px 5px;
p{
font-weight: 500;
font-family: 'Gotham-Bold';
line-height: 23px;
font-size: 16px;
margin-bottom: 0px;
letter-spacing: 0px;
color: #2c4d82;
}
}
div.our-story-pt-5 img{
margin-bottom: 12px;
}
.img-responsive{
display: inline-block;
height: auto;
max-width: 100%;
}
为什么你不使用Bootstrap自己的“col-xx-xx”类来将你的内容完美对齐?这将比使用UL> LI更好,我相信这并不适合结构 – IndieRok
我尝试使用小列对齐内容,但仍然无法获取图像下的所有文本@IndieRok –