1

I'm trying to align images in the center of a slider div. I'm adjusting FlexSlider css by the way. Here's my CSS code :

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

Everything is working like I want, except that I want wider image to be centered in the div. Right now it is left-aligned. I cannot use background-image by the way. Any ideas?

I also tried applying to the .flexslider .slides img :

margin-left:-50%...not working margin-left:auto and margin-right:auto...not working left:50% and right:50%...not working either

4

3 に答える 3

2

自分で見つけました。行に追加text-align:centerする必要.flexslider .slides > liがあり、それでうまくいきました。

于 2012-11-18T23:47:17.287 に答える
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>

高さを中央に配置するには、すべての人と同じ問題が発生しますが、セルが1つしかないテーブルを作成して使用することができます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 に答える
1

Try like this

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;
}

This will work in all browsers, with the possible exception of IE6.

于 2012-11-18T23:10:21.430 に答える