css - Bootstrap - 导航栏中的中心文本和搜索字段

Question

我希望占位符文本(“搜索”)与导航文本(博客、关于)垂直对齐。

我希望博客/关于在导航栏中垂直居中。

我在 CSS 上苦苦挣扎，所以我不太确定要添加/更改哪些类。

示例 here .

我正在使用的 HTML:

<header class= "blog-masthead">
<div class="container">
    <nav class="blog-nav">
        <a class="blog-nav-item " href="/blog">Blog</a>
        <a class="blog-nav-item current" href="/about">About</a>
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch">
      </div>
      <button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button>
    </form>
    </nav>
</div>

Answer 1

使用'pull-right'类来对齐表单

<form class="pull-right" role="search">

然后让 display: inline-block 你的输入并使用 line-height: 30px 来垂直对齐内联元素

http://jsfiddle.net/rgct4p0g/3/