在导航栏中垂直对齐文本

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

如果只是一行文字，请将包含line-height的{​​{1}}设置为匹配nav的{​​{1}}，例如：

<强> CSS

height

<强> HTML

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

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