css/html - center-aligning 十六进制网格中的文本不起作用

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

我会推荐你 re-structure 你的 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 相关。这样，当您将元素绝对定位在其中时，该定位将与您的 "icon" div 相关（例如，顶部将成为 div 的顶部）。也是一种非常简单的方法，可以让您的图像和文本在 div.

中居中

.icon p{text-align:center;}
.icon img{display:block; margin:0 auto;}

如果有帮助请告诉我。

Answer 2

尝试将 .iconTitle css 属性 left 设置为 22%

.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: 22%;
    font-size : 25px;
    white-space:nowrap;
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js">
</script>
  <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>

jsfiddle http://jsfiddle.net/L389kv6h/

css/html - center-aligning 十六进制网格中的文本不起作用

css/html - center-aligning text in a grid hex doesn't want to work

html

css

jquery

text-align

twitter-bootstrap