1

我正在尝试在滑块 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%......也不工作

4

3 回答 3

2

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

于 2012-11-18T23:47:17.287 回答
1

像这样试试

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 可能除外。

于 2012-11-18T23:10:21.430 回答
1

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

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

希望这可以帮助！

于 2012-11-18T23:08:16.227 回答