html - 将一行中的图像与每个图像下方的文本对齐

Question

简而言之，我正在尝试实现与此类似的设计：

白框是图像，红色画笔是文本行（顶行将包含名称并在其专业下方）但使用 div 已被证明是有问题的，因为我无法让内容正确排列行 - 由于兼容性问题，我不太热衷于使用这样的表格，所以我希望这里的某个人能够帮助我尝试让它与 div 一起工作，然后再回到那个.

下面是我到目前为止的代码和一个 jsfiddle 伴奏。

<div id="design-cast">
     <h4>Design</h4>

    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
    <div class="member">
        <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" />
        <div class="name">Name
            <br />Description</div>
    </div>
</div>

CSS

.member {
    display: inline;
}
.name {
    display: inline;
}
.member img {
    width: 13%;
    display: block;
}

jsfiddle

Answer 1

.member在元素和float它们上设置宽度。

jsFiddle 示例- 它响应式地工作。

请注意，正如评论中所指出的，如果图像的尺寸不同，这也会对齐底部的文本。

更新的 CSS

#design-cast {
    position: relative;
    overflow: hidden;
}

.member {
    float: left;
    width: 31%;
    margin: 1% 1% 45px 1%;
}

.name {
    position: absolute;
    bottom: 0px;
}

.member img {
    width: 100%;
    display: block;
}

Answer 2

正是你想要的，文本居中。

.member {
display: inline-block;
width: 150px;
height: 200px;
vertical-align: top;
text-align:center;
}
.name {
    display: inline;
}
.member img {
    width: 100%;
    display: block;
}

jsfiddle：http: //jsfiddle.net/skoltyno/MhRnz/4/

Answer 3

一个内联块解决方案（如果需要，您可以将整个东西放入text-align: center容器中）：

.member {
    display: inline-block;
    width: 150px;
    height: 200px;
    vertical-align: top;
}
.name {
    display: inline;
}
.member img {
    width: 100%;
    display: block;
}

http://jsfiddle.net/MhRnz/2/