在<ul> </ul> </span>的底部对齐<span>

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)

Answer 2

请尝试关注css

.carousel li {
display: 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);
float:left;

}