垂直居中导航搜索栏引导程序 3答案

【问题标题】：Vertically center navigation search bar bootstrap 3垂直居中导航搜索栏引导程序 3
【发布时间】：2016-03-01 19:21:29
【问题描述】：

我正在尝试在我的网站导航中垂直居中搜索栏。我尝试在搜索元素周围添加一个 div 并向其添加文本中心。我也试过margin: 0px auto !important;。这些似乎都没有对元素产生任何影响。

我创建了一个bootsnipp

http://bootsnipp.com/snippets/E7WgX

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个

.top-header {
    background-color: #D9D9D9;
}
.media-body{
    vertical-align: middle !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row top-header">
    <div class="container">
        <div class="media">
            <div class="media-left">
                <img class="media-objects" src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
            </div>
            <div class="media-body">
                <div class="input-group">
                    <input type="text" class="form-control input-lg" placeholder="Search" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

有没有办法将搜索栏推到容器的右侧？
我加了一个pull-right类，效果很好。谢谢

【解决方案2】：

垂直对齐是一个困难的话题，正确的解决方案非常依赖于使用的布局。如果您使用的是 sn-p 布局，我建议将这些样式添加到列中。要使vertical-align: middle css 正常工作，您需要禁用列的浮动并保持它们内联添加display: inline-block。因此适用于两个列类float-disable，然后将vcenter 添加到包含搜索的列中。 Css 样式如下所示：

.float-disable{
   float: none;
   display: inline-block;
}

.vcenter{
   vertical-align: middle;
}

【讨论】：