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

简言之，我正试图实现一种类似于此的设计：

白色的框是图像，红色的画笔是文本行（最上面的一行会有一个名字，在他们的专业下面），但是使用div已经被证明是有问题的，因为我不能让内容排成一行-由于兼容性问题，我不太喜欢用表来处理这样的事情，所以我希望这里有人能帮助我，在我回到那个之前，让它和DIV一起工作

下面是我到目前为止的代码和一个JSFIDLE附带文件

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

---

在

.member

元素上设置一个宽度，然后

浮动它们

-它的工作方式是负责任的

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

更新的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;
}

正是你想要的，文本居中

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

jsiddle:
一种内联块解决方案（这样，如果需要，您可以将整个内容放入
文本对齐：居中的容器中）：

我就是这么做的。请注意最右边图像上的文本-在我的opinion@mplungjan谢谢我甚至没有注意到-我会修正它。但是垂直对齐可能会有所不同？
.member {
display: inline-block;
width: 150px;
height: 200px;
vertical-align: top;
text-align:center;
}
.name {
    display: inline;
}
.member img {
    width: 100%;
    display: block;
}

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