Question

我已经安装了Flexslider jquery插件。我的幻灯片中有一些图像，在每个图像上我想添加一些内容，无论屏幕尺寸如何，都会水平和垂直居中

我正在尝试使用 table-cell 技术，但似乎无效或者我没有正确使用它。

这是标记：

<div id="slider" class="flexslider is-Table">
<ul class="slides">
    <li>
        <div class="Table-Cell">
            <div class="Center-Block">
                DUMMY CENTERED CONTENT
            </div>
        </div>
        <img src="http://placehold.it/1400x700" />
    </li>
    <li>
        <img src="http://placehold.it/1400x700" />
    </li>
    <li>
        <img src="http://placehold.it/1400x700" />
    </li>
</ul>

这是CSS：

#slider {border:none;}
.is-Table {display:table;}

.Table-Cell {
 display: table-cell;
 vertical-align: middle;
 }

.Center-Block {
width: 50%;
margin: 0 auto;
z-index:999999;
}

这是一个jsfiddle

我想要做的是将DUMY CONTENT水平和垂直居中放在图像上，而不使用固定的宽度和高度，因为我希望它具有响应性。

我做错了什么？

Answer 1

display:table可能不适合这种情况。当您可以将特定高度传递到桌子或其容器时，它最有效。

我不知道您尝试居中的内容类型，但可能有效的一种解决方案是绝对按百分比定位。

Demo Fiddle

HTML：

<div id="slider" class="flexslider is-Table">
    <ul class="slides">
        <li>
            <div class="centered">
                    DUMMY CENTERED CONTENT
            </div>
            <img src="http://placehold.it/1400x700" />
        </li>
        <li>
            <img src="http://placehold.it/1400x700" />
        </li>
        <li>
            <img src="http://placehold.it/1400x700" />
        </li>
    </ul>
</div>

CSS：

.slides > li {
    position: relative;
}
.centered {
    position: absolute;
    top: 50%;
    left: 30%;
}

flexslider插件内的响应绝对中心

1 个答案: