我试图在 bootstrap 中垂直居中对齐一个 div <header>
但它不起作用(请在投票前访问 JSFiddle 链接!):
<div style="display: table-cell; height: 50px; vertical-align: middle;">
<button type="button" class="btn btn-default navbtn">
<span class="glyphicon glyphicon-leaf"></span>
</button>
<button type="button" class="btn btn-default navbtn" >
<span class="glyphicon glyphicon-cog"></span>
</button>
<div id="navbar-search">
<button type="button" class="btn btn-default navbar-search-btn" >
<span class="fa fa-search"></span>
</button>
<input type="search" class="navsearch" />
</div>
</div>
当我删除 navbar-search
时div 按钮很好。
JSFiddle:http://jsfiddle.net/maysamsh/Rp94k/1/
注意:搜索容器有display:inline-block;
并使其粘在顶部,我无法将其移除。
最佳答案
html
<header class="navbar">
<div class="container-fluid expanded-panel">
<div class="row" dir="rtl">
<div class="col-sm-5">
3
</div>
<div class="col-sm-2">
2
</div>
<div class="col-sm-5">
<div style="display: table;">
<button type="button" class="btn btn-default navbtn">
<span class="glyphicon glyphicon-leaf"></span>
</button>
<button type="button" class="btn btn-default navbtn" >
<span class="glyphicon glyphicon-cog"></span>
</button>
<div id="navbar-search" style="display: table-cell;">
<button type="button" class="btn btn-default navbar-search-btn" >
<span class="fa fa-search"></span>
</button>
<input type="search" class="navsearch" />
</div>
</div>
</div>
</div>
</div>
</header>
CSS
.navbar{
background-color:#fff;
border-bottom:#eee solid 1px;
}
.navbtn {
font-size:large;
margin-left: 5px;
}
.navsearch{
text-align: right;
-webkit-border-radius: 15px 0 0 15px;
border-radius: 15px 0 0 15px;
outline: none;
background: #eee;
cursor: inherit;
display:inline-block;
border:none;
padding:5px;
height:35px;
}
#navbar-search{
display:inline-block;
float:none;
margin-top:10px;
}
.navbar-search-btn{
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
display:inline;
float:right;
border:none;
background: #eee;
height:35px;
}
关于css - 使div垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24940026/