垂直对齐文本在导航栏

如何我不垂直对齐navbar内的文本或页脚垂直对齐文本在导航栏

我尝试了几个这里提到的事，但我没能做到这一点。 http://phrogz.net/CSS/vertical-align/index.html

你能至少指向我出去，我可以了解有关对准

这怎么看起来来源：

enter image description here

来源：

<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>

来源

2013-08-22 nevermind

This Worked！

有些不可思议的%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

来源

2013-08-23 03:05:49 nevermind

如果它只是一行文字，请将您的line-height设为nav相匹配的是height，例如：

CSS

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

HTML

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

Codepen sketch.

来源

2013-08-22 18:35:14 kunalbhat

应该做到这一点更清洁的方式。 – nevermind

哈哈，你是什么意思？你是一个试图垂直居中嵌套8层深文本行的人。 – kunalbhat

这不是我的代码... :( – nevermind

我不知道的最好的解决方案，但你可以玩margin-top来垂直对齐的东西。在你的榜样，只是玩弄它在浏览器中，这让我垂直对齐：

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

您可以通过值或选择打的多调整它自己的喜好。希望能帮助到你。

来源

2013-08-22 18:41:30 kikuchiyo

我打算以正确的方式做到这一点，无论如何 – nevermind

k，祝你好运:) – kikuchiyo

垂直对齐文本在导航栏

回答

相关问题