html - 将 对齐到 的底部

Question

我有一个图像轮播，其 HTML 是固定的。尝试对齐每个图像的标题，使其位于 <ul> 的底部但我似乎无法让它看起来正确。

Fiddle

这是我的 HTML

<div class="carousel">
    <ul>
        <li>
            <img src="someImage.jpg">
            <span class="caption">Some Caption</span>
        </li>
        <li>
            <img src="someImage.jpg">
            <span class="caption">Some Caption</span>
        </li>
    </ul>
</div>

我的CSS

.carousel img {
    max-height: 200px;
    max-width: 200px;
    vertical-align: middle;
}
.carousel li {
    display: inline-block;
    padding: 5px;
    position: relative;
    cursor: pointer;
    width: 200px;
    height: 200px;
    text-align: center;
    -webkit-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
    -moz-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
    -ms-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
    -o-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
    transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
}
.carousel .caption {
    display: block;
    position: absolute;
    bottom: 10px;
    text-align: center;
    background-color: rgba(240,240,240,0.75);
    font-weight: bold;
    font-size: 12px;
    padding: 5px 0 5px 0;
    width: 200px;
    max-width: 200px;
}

Answer 1

您希望图像在其容器内居中对齐。为此，我会在图像周围添加一个包装器，以便它可以很好地位于其 li

内部

 //Markup
<div><img src="https://www.metsales.com/MetropolitanSales/ConstantContact/Bematech/images/br200bt.png" /></div>
 //css
 .carousel li img {
     position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }

此外，由于 css 非常性感，您现在可以使用转换来使垂直和水平居中对齐。

请看这个Sexy little Fiddle (might not be sexy)