使 div 垂直居中答案

【问题标题】：Making div vertically centered使 div 垂直居中
【发布时间】：2014-09-16 09:09:00
【问题描述】：

我正在尝试在引导程序<header> 中垂直对齐一个 div，但它不起作用（请在否决之前访问 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; 并使其粘在顶部，我无法删除它。

【问题讨论】：

重复（许多之一）；在这里查看答案：stackoverflow.com/questions/24918443/vertically-centering-image/…。在这种情况下，您的 div（导航栏搜索）可能是 display: block...所以它不能与按钮元素在一行中。
不，不一样。搜索容器 div 有 display:inline-block;。

标签： css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

【解决方案1】：

您需要将.navbar-btn 添加到按钮以使其垂直居中。详情请见Bootstrap Docs。

从语义上讲，如果它是一个导航，它应该在一个导航 HTML5 元素中。无论如何，您的列太宽并且正在向下推图标（占据 100% 宽度的列没有空间容纳其他任何东西）。

查看Fiddle 使用非常基本的引导程序

  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="row"> 
        <div class="col-sm-6">
            <div class="row">
            <div class="col-sm-5">1</div>
            <div class="col-sm-2">2</div>
            <div class="col-sm-5">3</div>
            </div>
        </div>
        <div class="col-sm-6 navbar-right">
            <div class="row">
      <div class="col-sm-8">
          <form class="navbar-form navbar-right" role="search">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search" name="q">
                      <div class="input-group-btn">
                          <button class="btn btn-default" type="submit">
                              <i class="glyphicon glyphicon-search">
                              </i>
                          </button>
                      </div>
                  </div>
              </form><!--/form-->
          </div><!--/form column-->
          <div class="col-sm-4">
              <button type="button" class="btn btn-default navbtn navbar-btn">
                  <span class="glyphicon glyphicon-leaf"></span>
              </button> 
              <button type="button" class="btn btn-default navbtn  navbar-btn" >
                  <span class="glyphicon glyphicon-cog"></span>
              </button>
            </div><!--/buttons column-->
            </div><!--/row column-->
        </div><!--/right column-->
      </div><!--/row-->
   </div><!--/container-->
</nav> <!--/nav-->

【讨论】：

我认为你没有检查 JSFiddle 链接！
我更新了代码并包含了一个小提琴链接。您可以根据需要调整父列。
好吧，实际上你使用的是默认导航栏控件，我假装不使用它。

【解决方案2】：

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;

}

小提琴：http://jsfiddle.net/monzoor/TC9UH/1/

【讨论】：