css - 显示具有 block 和表格单元格功能的 anchor 标记

Question

所以，我有以下代码:

<div class="flexslider" id="carousel">
    <ul class="thumbs">
        <li class="thumbnail">
            <a href="#">Really long link that happens to move to multiple lines</a>
        </li>
        <li class="thumbnail">
            <a href="#">Link 2</a>
        </li>
        <li class="thumbnail">
            <a href="#">Link 3 </a>
        </li>
        <li class="thumbnail">
            <a href="#">Link 4</a>
        </li>
    </ul>
</div>

使用以下 CSS:

.flexslider ul.thumbs {
    margin: 0;
    display: table;
    height: 100px;
}

.flexslider li.thumbnail {
    list-style: none;
    width: 25%;
    height: 100px;
    display: table-cell;
    border-right: solid 1px #000000;
    text-align: center;
    vertical-align: middle;
    background-color: #EEEEEE;
}

.flexslider li.thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    padding: auto 5px;
    vertical-align: middle;
}

问题是这样的。我希望链接填满整个区域 - 因此 display: block;。但是，我还希望文本 vertical-align: middle;。但是，如果我将显示设置为阻塞，它会填充该区域，但不会垂直对齐文本。如果我将显示更改为表格单元格，文本会正确对齐，但 a 不会填满整个 li。我不知道如何让它同时做到这两个。

想法？

谢谢!

Answer 1

您需要将行高设置为li 的高度。检查一下!

http://codepen.io/tylerism/pen/NqXLJm

.flexslider li.thumbnail a {
    display: block;
    width: 100%;
    line-height:100px;   
}

编辑:我更新了 my codepen .我使用了一些 hack，我将 anchor 标记放在 li 的外部。这对你有用吗？