Question

我有一个缩略图，其中有几行文字垂直居中。我使用行高来减少行之间的前导，但这导致文本偏离中心并且太靠近图像的顶部。是否有任何代码可以用来解释文本居中时基线的变化？我到处寻找并找不到解决方案。

HTML：

<ul class="video-list">

    <a href="http://player.vimeo.com/video/100446423?autoplay=1" class="colorbox">
        <li class="thumbnail">
            <video preload="auto" loop width="256" height="144">
                <source src="videos/reel.mp4" type="video/mp4">
                <source src="videos/reel.webm" type="video/webm">
                <source src="videos/reel.ogv" type="video/ogg">
                <img src="images/reel.jpg" width="256" height="144" />
            </video>
            <span class="text-content"><span>
            <span class="l1">Editor & Colorist Work</span><br>
            <span class="l2">2014 Showreel</span>
            </span></span>
        </li>
    </a>

</ul>

CSS：

ul.video-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0;
}

ul.video-list li {
    display: inline-block;
    height: 144px;
    margin: 0;
    padding: 8px;
    position: relative;
    width: 256px;
}

span.text-content {
    background: rgba(0,0,0,0.5);
    color: #FFF;
    cursor: pointer;
    display: table;
    height: 144px;
    left: 8px;
    position: absolute;
    top: 8px;
    width: 256px;
    opacity: 1;
    filter: alpha(opacity=100);
}

span.text-content>span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}

ul.video-list li:hover span.text-content {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transition:all 0.6s ease;
    -webkit-transition:all 0.6s ease;
    -ms-transition:all 0.6s ease;
    -o-transition:all 0.6s ease;
    transition:all 0.6s ease;
}

.l1 {
    letter-spacing: 0.2em;
    font-size: 14px;
    padding-bottom: 5px;
    line-height: 100%;
}

.l2 {
    font-family: 'Rock Salt', cursive;
    text-transform: lowercase;
    letter-spacing: 0.2em;
    font-size: 12px;
}

希望我解释说没关系。任何帮助是极大的赞赏。谢谢！：）

线高会影响垂直对齐？

0 个答案: