Question

我在<li>中正确地定位文本时遇到了一些困难。

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

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

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

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/

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

在div内，将display: table应用于ul，然后display: table-cell应用于li 列出项目。对于vertical-align: middle，请应用{{1}}并获得良好的垂直居中。

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

在具有100％高度的容器的可变大小的LI元素中垂直对齐的文本

1 个答案: