Bootstrap 导航栏：如何垂直对齐 wrapped-/multiple 行文本

Question

我正在尝试垂直对齐 bootstrap 导航栏项目上的文本。文本分两行。对齐单行文本没问题，但当它在两行时垂直对齐会变得更加困难。我不能使用 line-height 有没有其他选择？我还没有看到任何关于换行文本的好的解决方案，很多解决方案都没有考虑到多行文本。

HTML代码

<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">SHORT SINGLE LINE</a>
    </li>
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">VERY LONG TEXT, WRAPPED TEXT</a>
    </li>
</ul>

CSS代码

.navbar-nav > li > a
    {

    height: 58px;
    line-height: 19px;
    padding-top: 10px;
    text-align: center;
}

Answer 1

这就是您所需要的：

.navbar-nav > li > a
    {

    text-align: center;

    display: inline-block;
    vertical-align: middle;
}

你必须删除这两个：

    height: 58px;
    line-height: 19px;

LIVE DEMO

Answer 2

.navbar-nav > li > a
{
height: 58px;
line-height: 19px;
padding-top: 10px;
text-align: center;
}

您只需删除该部分，没有必要，文本会自行保持垂直居中

Answer 3

您可以在父 div 上使用 display:table-cell 和 display:table，而不是在 li 上使用 float:left;。

我确定 bootstrap nav 元素是浮动的。检查此代码：

.navbar-nav > li > a
{
  height: 58px;
  line-height: 19px;
  text-align: center;
  padding: 0 5px;
}
.navbar-nav{
  display: table;
  background: #f5f5f5;
  padding: 0;
  margin: 0;
}
.navbar-nav > li{
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  float: none !important;
  text-align: center;
  border-left: 2px solid #fff;
}
.navbar-nav > li:first-child{border: 0;}

<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">SHORT SINGLE</a>
    </li>
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">VERY LONG TEXT, <br> done WRAPPED TEXT</a>
    </li>
</ul>

Bootstrap 导航栏：如何垂直对齐 wrapped-/multiple 行文本

Bootstrap nav-bar: how to vertical align wrapped-/multiple line text

css

twitter-bootstrap

twitter-bootstrap-3