鉴于以下导航栏声明,我需要将下面的图像与 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>
最佳答案
vertical-align
仅适用于表格单元格(对于它的子元素)或内联元素(对于它们自身)。
考虑到这一点,您可以将 li
更改为 inline-block
元素并垂直对齐它们:
.navbar-nav li {float:none; display:inline-block; vertical-align:bottom;}
关于html - 将 Bootstrap 导航栏内的图像垂直对齐到基线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42536894/