Center big image in smaller div

Question

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

If the CMS can crop images at upload time, you will not scratch your head for the slider and clients will load smaller images. Of course valid only if you don't need to navigate into image at client side or something like that, in this case you can create crop + original image. — Alexandre Lavoie, Nov 18 '12 at 23:31
Thanks but, honestly I wouldn't ask this if the user could crop the image himself. I'm asking what I need to add in the CSS code I posted to make this work. Thanks! — larin555, Nov 18 '12 at 23:40

score 2 · Accepted Answer · answered Nov 18 '12 at 23:47

2

I found it out by myself. I just needed to add text-align:center to the .flexslider .slides > li line and it did the trick.

answered Nov 18 '12 at 23:47

larin555

1,669
4
28
43

score 1 · Answer 2 · edited Jan 17 '13 at 07:18

To center your image in width you can do as this :

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

To center in height you will have same problems as everyone, but you can create a table with only one cell and use 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>

Hope this helps!

Thanks, but I need to use CSS only. I'm modifying a CSS file from a simple CMS platform and it uses FlexSlider for galleries. I need to modify the FlexSlider.css file to make this work. Any ideas? — larin555, Nov 18 '12 at 23:17

Aram Beginyan · Answer 3 · 2012-11-18T23:26:53.687

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.

edited Nov 18 '12 at 23:26

answered Nov 18 '12 at 23:10

Aram Beginyan

294
1
4

Thanks but I need a way that will work with any size images. I want this to work everytime I upload an image. That's why I need to use the same CSS code I copied in my first post. By the way, you can just paste a link instead of copy/pasting answers from other members ;) http://stackoverflow.com/a/8150196 – larin555 Nov 18 '12 at 23:15
Could it be easier to make a thumbnail of the image at upload time? – Alexandre Lavoie Nov 18 '12 at 23:19
width: 1000px; margin-left: -450px; This style you can set on span dynamically on server side – Aram Beginyan Nov 18 '12 at 23:24

Center big image in smaller div

3 Answers3