我正在尝试在我的网站导航中垂直居中搜索栏。我尝试在搜索元素周围添加一个div 并向其添加文本中心。我也尝试过边距:0px 自动!important;。这些似乎都对元素没有任何影响。
我创建了一个引导截图
http://bootsnipp.com/snippets/E7WgX
尝试这样做
.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>
垂直对齐是一个困难的主题,正确的解决方案非常依赖于使用的布局。如果代码段布局是您使用的,我建议将这些样式添加到列中。要使 css vertical-align: middle
工作,您需要禁用列的浮动并使它们保持内联添加display: inline-block
。因此,将类float-disable
应用于两列,然后将vcenter
添加到包含搜索的列中。css 样式如下所示:
.float-disable{
float: none;
display: inline-block;
}
.vcenter{
vertical-align: middle;
}