html - 将 Bootstrap 导航栏内的图像垂直对齐到基线

Question

鉴于以下导航栏声明，我需要将下面的图像与 Bootstrap 导航栏的底部对齐。我有一个 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