如何将图像对齐嵌套div的底部(在引导程序中)?

时间:2015-03-05 00:45:42

标签: css html5 css3 twitter-bootstrap-3

我想将不同大小的图像对齐到div的底部,但图像也在它们自己的div中,因此其他答案不起作用。

我有以下HTML:

    <div class="row footer-links">
        <section>
            <div class="col-md-4">
                <p>
                    Proudly presented and sponsored by
                </p>
            </div>
            <div class="col-md-8 col-xs-12 logo-links">
                <div class="row logo-bottom">
                    <div class="col-md-2 col-xs-12 logo-border col-md-offset-1">
                        <img id="rasv" class="center-block" src="img/rasv.png" alt="RASV logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/victoria-farmers.png" alt="Victoria Farmers logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/anz.png" alt="ANZ logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/pwc.png" alt="PWC logo">
                    </div>
                    <div class="col-md-2 col-xs-12 logo-border">
                        <img class="center-block" src="img/vac.png" alt="VAC logo">
                    </div>
                </div>
            </div>
        </section>
    </div>

我使用了以下CSS:

.logo-border {
    border-right: 1px solid #d1d3d4;
    height: 54px;
    vertical-align: bottom;
    display: table-cell;
}

以下是Code Pen以获取更多信息。

1 个答案:

答案 0 :(得分:2)

你真的很亲密。

它无法工作的原因是因为列是浮动的。因此,元素的行为与table-cell不同,因此呈现vertical-align: bottom无用。

您可以简单地添加float: none,它可以根据需要运行。

Updated Example

.logo-bottom .logo-border {
  border-right: 1px solid #d1d3d4;
  height: 54px;
  vertical-align: bottom;
  display: table-cell;
  float: none;
}

作为旁注,我将选择器.logo-border的{​​{3}}增加到.logo-bottom .logo-border,以便覆盖float: left