标题说明了一切。我有一个图像网格（使用引导程序），每个图像上方都有一个标题，但是我无法使标题表现得像是居中对齐。我在jsfiddle中重新创建它时遇到了问题，但是我做了一张图片来解释（请参阅底部）。
相关HTML
<div class="container">
<div class="row topRow">
<div class="col-sm-3">
<div class="icon">
<img src="http://placehold.it/200x200">
<p class="iconTitle">Title awdsad awd </p>
<p class="iconDescription">Description</p>
</div>
</div>
</div>
</div>
相关CSS
.container .topRow img {
position: absolute;
top: 90%;
left: 20%;
}
.iconDescription {
text-align: center;
position: absolute;
left: 20px;
top: 235px;
}
.iconTitle {
position: absolute;
top: -35px;
left: 135px;
font-size : 25px;
white-space:nowrap;
text-align: center;
}
还有图片-http://i.imgur.com/vEQWDUT.png
我知道我总是可以手动完成的，但是这些图像会很多，似乎效率不高。注意，jQuery中有一些小的动画，但这不是原因（全部删除，没有效果）。
我已经尝试了一百万零一件事，但我仍然很新，不胜感激任何提示。谢谢！
我建议您像这样重新构造html：
<div class="container">
<div class="row topRow">
<div class="col-sm-3">
<div class="icon">
<p class="iconTitle">Title awdsad awd </p>
<img src="http://placehold.it/200x200">
<p class="iconDescription">Description</p>
</div>
</div>
</div>
</div>
这样，您的标题就会出现在图像的顶部，在将其作为简单文本进行查看时，它的语义更加丰富。
当涉及到CSS时，您需要考虑的是显示图像的布局。
简而言之，您想要做的是
.icon{ position: relative;}
这样，Icon内部的所有内容都将相对于该div。这样，当您将元素绝对定位在其中时，该定位将与您的“图标” div有关（例如，top将成为div的顶部）。这也是将图片和文字放在该div中居中的一种非常简单的方法。
.icon p{text-align:center;}
.icon img{display:block; margin:0 auto;}
让我知道是否有帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句