Question

简而言之，我正在努力实现类似于此的设计：

mock up of design

白框是图像，红色画笔是文本行（顶行会有一个名字，在其专业之下）但是使用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 example - 它会起作用。

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

更新了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/

将图像与每个图像下方的文本对齐

3 个答案: