显示具有块和 table 单元格功能的锚标记

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;
}

问题是这样的。我希望 link 填满整个区域 - 因此 display: block;。不过，我也想把文字改成vertical-align: middle;。但是，如果我将显示设置为阻塞，它会填充该区域，但不会垂直对齐文本。如果我将显示更改为 table-cell，文本会正确对齐，但 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，我将锚标记放在 li 的外部。这对你有用吗？

Answer 2

你不喜欢用padding吗？

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

用 table-cell 代替 block 怎么样？

.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: table-cell;
    vertical-align: middle;
    height: 100px;
    width: 200px;
}

<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>

Answer 3

这里是一个使用行高的例子

https://jsfiddle.net/6w244Lm1/

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

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

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

显示具有块和 table 单元格功能的锚标记

displaying anchor tag with both block and table-cell features

css

hyperlink