vertikálne zarovnajte text v mape navbar - twitter-bootstrap

Ako vertikálne zarovnávam text vnútri a navbar alebo päta

Skúsil som pár vecí, ktoré tu boli uvedené, ale nebol som schopný to urobiť. http://phrogz.net/CSS/vertical-align/index.html

Môžete ma aspoň upozorniť na zdroj, kde sa môžem dozvedieť viac o zarovnaní

Takto to vyzerá:

zdroj:

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

odpovede:

1 pre odpoveď č. 1

Ak ide iba o jeden riadok textu, nastavte line-height vášho obsahu nav aby sa zhodoval s tým height, napríklad:

CSS

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

HTML

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

Náčrt Codepen.

---

0 pre odpoveď č. 2

Nie som si istý najlepším riešením, ale môžete hrať s margin-top na vertikálne zarovnanie vecí. Vo vašom príklade, ktorý si s prehliadačom prehliadam, ma to zvislo zarovnalo:

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

Môžete si to prispôsobiť podľa svojich predstáv hraním s hodnotami alebo selektormi. Dúfam, že to pomôže.

---

0 pre odpoveď č. 3

Toto fungovalo!

niečo magické o %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

---