Question

鉴于以下导航栏声明，我需要将下面的图像对齐到引导导航栏的底部。我有一个bootply，清楚地表明它们都是最顶层的。

我尝试将li元素设置为vertical-align: baseline，但这还不够。

<div class="navbar navbar-default navbar-fixed-top affix-top">
        <div class="container">
            <div class="navbar-right">
                <a href="">info@link.com</a>
                <a href="">INFO</a>
            </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" style="border: 1px solid black">
                    <li><a href="#"><img src="FIRST IMAGE"></a></li>
                    <li><a href="#"><img src="SECOND IMAGE"></a></li>
                    <li><a href="#"><img src="THIRD IMAGE"></a></li>
                </ul>
            </div>
        </div>
</div>

Answer 1

vertical-align仅适用于表格单元格（针对其子代）或内联元素（单独使用）。

考虑到这一点，您可以将li更改为inline-block元素并垂直对齐它们：

.navbar-nav li {float:none; display:inline-block; vertical-align:bottom;}

Updated pen

Answer 2

必须改变两件事。线高必须增加到最高图像的高度，图像必须为vertical-align: bottom;

.navbar-nav li a {
    line-height: 70px;
}

.navbar-nav li img {
    vertical-align: bottom;
}

http://www.bootply.com/rnfCHaf7R9

将引导导航栏内的图像垂直对齐到基线

2 个答案: