twitter-bootstrap - 在导航栏中垂直对齐文本

Question

我如何在navbar页脚或页脚内垂直对齐文本

我尝试了这里提到的几件事，但我无法做到。 http://phrogz.net/CSS/vertical-align/index.html

你能至少给我指出一个我可以了解对齐的来源吗

这是它的外观：

资源：

  <div class='navbar navbar-fixed-bottom navbar-inverse'>
    <div class='navbar-inner'>
      <div class='container-fluid'>
        <ul class='nav pull-left'>
          <li style='font-size:medium; color: #E8E8E8'>
            <ul class='inline'>
              <li class='active'>
                <i class='icon-warning-sign'></i>
                TEXT HERE
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

If it's just one line of text, set the line-height of your containing nav to match that of it's height, for example:

CSS

.navbar {
  line-height: 100px;
  height: 100px;
}

HTML

<div class='navbar'>
  <p>TEXT HERE</p>
</div>

Codepen sketch.

Answer 2

我不确定最好的解决方案，但你可以玩margin-top垂直对齐的东西。在您的示例中，只是在浏览器中使用它，这让我垂直对齐：

      ul.nav li ul li{ margin-top: 10px; }

您可以通过使用值或选择器来根据自己的喜好进行更多调整。希望能帮助到你。

Answer 3

这有效！

关于%a

-# without %a it doesn't go in the middle vertically 
.navbar.navbar-fixed-bottom.navbar-inverse{style: 'position:fixed'}
  .navbar-inner
    %ul.nav.pull-left
      %li.active
        %a
          %span
            %i.icon-warning-sign
            TEXT HERE