Question

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

如果您查看 My Fiddle ，您可以看到图片在<li>的中心附近的位置是否正常似乎让这个工作。尝试了相对定位的各种组合，但是一旦图像在正确的位置，标题似乎总是给我一个问题。

寻找一种通用解决方案，无论图像大小如何都能正常工作。

这是我的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;*/
    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

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

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

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

它不是那里最优雅的解决方案，我相信可能会有更好的解决方案，但是它可以毫不费力地完成工作。您可以查看here:

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/

中心和垂直对齐<li> </li>内的图像轮播图像

这是我的HTML

我的CSS

4 个答案: