Question

我有一个Bootstrap 2.3.2项目，里面有一个导航栏。此栏包含图标（Fontawesome），它们只是图标（不是按钮或链接）。但是，这些不正确地垂直对齐。他们坚持到顶部。

这是一个愚蠢的例子：

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div class="navbar">
  <div class="navbar-inner">
    <div class="navbar-form pull-left">
      <i class="icon-time"></i>
      <button class="btn">
        Some button
      </button>
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  </div>
</div>

我想将上面示例中的时钟图标向下移动，因此它与同一行上的文本对齐。最好只使用Twitter Bootstrap类，但我在文档中找不到任何内容。

Answer 1

也许添加vertical-align？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<style>
    .icon-time { 
        vertical-align: -6px;
}

</style>
<div class="navbar">
  <div class="navbar-inner">
    <div class="navbar-form pull-left">
      <i class="icon-time"></i>
      <button class="btn">
        Some button
      </button>
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  </div>
</div>

＆＃13;

Bootstrap 2.3.2 navbar-form中的图标垂直对齐

1 个答案: