标签文本上的定位故障
标签文本上的定位故障
提问于 2015-12-05 22:42:10
所以
这就是我想要达到的目标：
这就是我所拥有的：http://codepen.io/KieranRigby/pen/QyWZxV。对于片段波纹管，请使用“完整页面”视图。
label {
color: #6d6e70;
bottom: 0;
}
.img-row img {
width: 100%;
}
.img-row {
text-align: center;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container img-row">
<div class="row">
<div class="col-md-2 col-xs-12 col-sm-12 col-md-offset-1">
<img id="img-1" class="img-responsive" src="http://i.imgur.com/ftaEZS9.png" />
<label for="img-1">Make your essay</label>
</div>
<div class="col-md-2">
<img id="img-2" class="img-responsive" src="http://i.imgur.com/7YUtBZk.png" />
<label for="img-2">Upload your essay</label>
</div>
<div class="col-md-2">
<img id="img-3" class="img-responsive" src="http://i.imgur.com/Hy84vQC.png" />
<label for="img-3">Choose your pay</label>
</div>
<div class="col-md-2">
<img id="img-4" class="img-responsive" src="http://i.imgur.com/tSqCUuO.png" />
<label for="img-4">Mentors Check</label>
</div>
<div class="col-md-2">
<img id="img-5" class="img-responsive" src="http://i.imgur.com/VmwzHFD.png" />
<label for="img-5">Receive an email</label>
</div>
</div>
<!-- /.row -->
</div>
怎样才能让文字标签排在最下面？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-06 00:29:20
科德芬
在img和label上使用绝对定位对齐基线(类似于此所以回答)。
新CSS
.col-md-2 {
height: 250px;
}
.col-md-2 img {
position: absolute;
bottom: 30px;
width: 80%;
}
.col-md-2 label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}这是：
- 为您的
.col-md-2容器设置一个设置高度 - 将
label元素移动到其父.col-md-2的最底部。 - 将
img元素30 of移动到其父.col-md-2的底部。
img宽度设置为80%，以便在图像之间提供一些空间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34111797
复制相关文章
相似问题
腾讯云开发者
