居中和垂直对齐图像，用于内部<li>的图像轮播

Question

我创建了自己的图像轮播，其中我有一个图像和一个标题作为兄弟元素。我一直将图像设置为 position: relative; 并使用vertical-align: middle;但一直弄乱标题定位，该位置设置为 position: absolute; .

如果你看一下My Fiddle，你可以看到图像没有靠近<li>的中心，而且似乎无法让它工作。尝试了相对定位的各种组合，但一旦图像位于正确的位置，标题似乎总是给我一个问题。

寻找一种通用解决方案，无论图像大小如何，它都有效。

这是我的网页

<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;*/
    position: absolute;
}
.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

我相信有比这个更好、更优雅的解决方案，但是这是我个人在将多个图像连续居中到某个垂直中心时使用的。

我的想法是将您的图像标签包装在 2div 中，如下所示：

|----------------------------|
|.outer-image-wrap           |
|   |------------------------|
|   |.inner-image-wrap       |
|   |    --------------------|
|   |    |      <img/>       |
|___|____|___________________|

首先，remove position: absolute from img

对于.outer-image-wrap，将其设置为 display: table 、 height: 100% 、 width: 100% ;

然后对于.inner-image-wrap，将其设置为 display: table-cell ; 并vertical-align: middle

它不是最优雅的解决方案，我相信可能有一些更好的解决方案，但是它可以毫不费力地完成工作。你可以在这里查看：

Answer 2

通过添加以下内容来解决：

.carousel img {
    margin-left: -100px;
}

Answer 3

非常简单http://jsfiddle.net/1wwa4jxm/3/

我希望您在这里找到您需要的东西并根据自己的喜好进行更改。

img {
width:100px;
display:block;
}
li {
display:inline-block;
text-align:center;
padding:20px;
}

Answer 4

为包含标题的范围添加 css 规则：

.carousel span {
  max-height: 200px;
  max-width: 200px;
  margin-left: 80px;
  position: absolute;
}

http://jsfiddle.net/1wwa4jxm/5/