在一行中对齐图像并在每个图像下方放置文本

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

- secondubly

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;
}

- Josh Crozier

---

这就是我所做的。请注意最右边图像上的文本 - 在我看来也应该对齐。 - mplungjan

@mplungjan 谢谢！我甚至没有注意到 - 我会修复它。 - Josh Crozier

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/

- AbdelElrafa

---

但是垂直对齐可能应该不同吧？ - mplungjan

Answer 3

一个 inline-block 的解决方案（这样你可以把整个东西放在一个 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/

- adambene