html - 容器高度为 100% 的可变大小 LI 元素中的垂直对齐文本

Question

我很难在 <li> 中正确定位文本.

我正在使用 sass 版本的 bootstrap 3，并尝试设计外观类似于 iOS 邮件中“更多”和“垃圾箱”按钮的东西。

这是指向当前结果的链接。请注意带有红色背景的列表项，并且只有一行文本的高度较短，因此按钮文本的位置太低了。

http://jsfiddle.net/kvseelbach/MRa4C/8/

我想要可变高度的行，而不是强制所有列表项适合两行文本。如何改进此设计并解决高度问题？

li 操作项的核心 CSS:

.item-actions li {
    height: auto;
    display: inline-block;
    text-align: center;
    line-height: 91px;
    /* 107px height - 16px font size  */
}
li.mailbox-item {
    max-height: 107px;
}

Answer 1

如果您愿意调整 HTML，这里有一种方法:

HTML:

<div  class="item-actions-wrap">
    <ul class="item-actions">
      <li class="archive">Archive</li>
      <li class="view"><a href="#">View</a></li>
    </ul>
</div>

CSS:

.item-actions-wrap {
    position: absolute;
    top: 0;
    right: 0;
    margin:0;
    padding:0;
    height: 100%;
}
ul.item-actions {
    list-style: none outside none;
    margin:0;
    padding:0;
    height: 100%;
    background: #f5f5f5;
    display: table;
}
.item-actions li {
    height: 100%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

查看演示:http://jsfiddle.net/audetwebdesign/c56zF/

将您的列表项包装在绝对定位的 block 级 div 中。

在 div 中，将 display: table 应用于 ul，然后将 display: table-cell 应用于这 列出元素。对于 li，应用 vertical-align: middle 并且你会得到很好的垂直居中。

注意:你确实有另一个问题，因为绝对定位的 block 隐藏了一些 相邻元素的内容。您需要为绝对值留出一些空间 block 。