Question

我正在尝试在引导程序导航栏项目上垂直对齐文本。文本包含在两行中。对齐单行文本没有问题，但是当它在两行上时，垂直对齐变得更加困难。我不能使用行高有没有其他选择？我没有看到任何关于包装文本的好解决方案，许多解决方案没有考虑多行文本。

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

您可以在父display:table-cell上使用display:table和div代替float:left;上的li。

我确信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>

Answer 2

这就是你所需要的：

.navbar-nav > li > a
    {

    text-align: center;

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

你必须删除这两个：

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

<强> LIVE DEMO

Answer 3

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

你只需删除该部分，它不是必需的，文本垂直居中于其自身

Bootstrap导航栏：如何垂直对齐包装/多行文本

3 个答案: