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。我正在使用一些黑客，我把锚标签放在li的外面。这对你有用吗？

Answer 2

您不想使用padding吗？

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

如何使用table-cell代替block？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

以下是使用line-height

的示例

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

显示具有块和表格单元功能的锚标签

3 个答案: