jquery - css/html - 网格十六进制中的居中对齐文本不起作用

Question

标题说明了一切。我有一个图像网格(使用 Bootstrap )，每个图像上面都有一个标题，但我无法让标题表现得像居中对齐。我在 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 中有一些小动画，但这不是原因(全部删除，没有效果)。

我已经尝试了一百万零一件事，但我仍然很新，将不胜感激任何提示。谢谢!

Answer 1

我建议您像这样重新构建您的 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;}

如果这有帮助，请告诉我。