Question

我正在尝试将图像对齐滑块div的中心。我顺便调整了FlexSlider css。这是我的CSS代码：

.flexslider {margin: 0; padding: 0; width: 600px; height:480px; overflow:hidden;margin-left:auto;margin-right:auto;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width:auto;height:100%; display: inline-block; text-align:center;}

一切都像我想要的那样工作，除了我希望更宽的图像在div中居中。现在它是左对齐的。顺便说一句，我不能使用背景图像。有什么想法吗？

我也尝试过申请.flexslider .slides img：

margin-left:-50% ...无法正常工作 margin-left:auto和margin-right:auto ...无效 left:50%和right:50% ......无法正常工作

Answer 1

我自己发现了。我只需要将text-align:center添加到.flexslider .slides > li行，然后就可以了。

Answer 2

要使图像以宽度居中，您可以这样做：

<!-- The place you want the "centered image" -->
<div style="position: relative;width: 600px;height: 480px;overflow: hidden;">
    <div style="position: absolute;left: -700px;width: 2000px;height: 480px;">
        <img src="image.jpg" style="margin: 0 auto;" />
    </div>
</div>

以高度居中，您将遇到与所有人相同的问题，但您可以创建一个只包含一个单元格的表并使用vertical-align: middle;

<!-- The place you want the "centered image" -->
<div style="position: relative;width: 600px;height: 480px;overflow: hidden;">
    <table style="position: absolute;left: -700px;top: -760px;width: 2000px;height: 2000px;">
        <tr><td style="vertical-align: middle;"><img src="image.jpg" style="margin: 0 auto;" /></td></tr>
    </div>
</div>

希望这有帮助！

Answer 3

试试这个

<强> HTML

<div class="imageContainer">
    <span style="width: 1000px; margin-left: -450px;"><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

<强> CSS

.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
}
.imageContainer > span > img {
    display: inline-block;
}

这适用于所有浏览器，可能除了IE6。

在较小的div中居中心大图像

3 个答案: