Question

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

<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/

第二种：第二种方法将周围容器的显示设置为显示为“表”，然后创建一个内部“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所示。

希望它有所帮助。

bootstrap固定导航栏垂直对齐问题

2 个答案: