bootstrap 修复了导航栏垂直对齐问题

Question

我在我的 ASP.net 项目母版页中添加了一个 Bootstrap 固定底部导航栏，它有一个徽标和版权文本（为了简单起见，我借用了 Microsoft 徽标）。 我希望它们排成一行，所以我将 .navbar-left 样式应用于它们的 parent ，工作，但是，我发现文本是顶部对齐的，我希望它具有垂直居中对齐，如何实现？谢谢。

<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<ul class="nav navbar-nav navbar-left">
    <li><img src="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" alt="MSTF Logo"/></li>
    <li><p>&copy; 2015 Microsoft. All rights reserved</p></li>
</ul>

http://jsfiddle.net/tz783rkn/5/

Answer 1

在img标签内添加这段代码：

style="float:left; margin-right:7px;"

例如：

<img style="float:left; margin-right:7px;" 
src="http://c.s-microsoft.com/en-us/CMSImages/
mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" 
alt="MSTF Logo"/>

看到这个：http://jsfiddle.net/tz783rkn/7/ 从那里您可以设置第二个 <li> 的 margin-top 以使其看起来很漂亮

更新： http://jsfiddle.net/tz783rkn/9/

Answer 2

有几种不同的方法可以完成您正在尝试做的事情：

首先：如果您的徽标大小是预先确定的，那么您可以在包含文本的列表元素中添加一个类，我们称之为“copyright-text”。然后我们可以设置元素的样式，并在顶部（和左侧）给它一些边距，让它看起来位于中心。

.copyright-text {
    margin-top: px;
    margin-left: 10px;
}

这是一个展示这种方法的小提琴：http://jsfiddle.net/tz783rkn/8/

第二种：第二种方法将周围容器的显示设置为“table”，然后创建一个内部“div”元素，显示设置为“table-cell”。这允许您使用“vertical-align” CSS 属性，该属性允许您将元素定位在父元素的中间，类似于在表格中的方式。这需要稍微重构您的 HTML 并添加一些额外的类或内联样式：

HTML：

<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<ul class="nav navbar-nav navbar-left">
    <li class="table-container">
        <div class="tabel-cell-container">
            <img src="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" alt="MSTF Logo"/>
            <p class="copyright-text">&copy; 2015 Microsoft. All rights reserved</p>
        </div>
    </li>
</ul>

CSS：

.navbar {
    min-height: auto;
}
li.table-container {
    display: table;
}
.tabel-cell-container {
    display: table-cell;
    vertical-align: middle;
}
.copyright-text {
    display: inline-block;
    margin-left: 10px;
}

这是一个使用表格显示方法的小提琴：http://jsfiddle.net/tz783rkn/16/

这么小的面积很难看到结果，所以你可以夸大列表项的高度，看看它是如何将子元素定位在父元素中间的，如图here。

希望对你有帮助。