Question

I am using the flex slider jquery plug-in

How do I centralize the images inside the slider with dynamic width and height?

<div class="flexslider">
    <ul class="slides">
        <li><img .../></li>
        <li><img .../></li>
    </ul>
</div>

ul.slides li
{
  margin: 0px; padding: 0px;
  text-align:center;
}

ul.slides li img
{
  width: 100%;
  /*display: table-cell; vertical-align: middle; does not work*/
}

Answer 1

Here’s a simple effective jQuery solution for you. Adding this as a new answer as it’s very different to my other one above.

The CSS ways seem messy, and I’m not entirely sure @user1743214 ‘s suggestion will work with FlexSlider.

I’ve replicated some FlexSlider code and set it up in a JSFiddle. It’s not animated or anything, but you’ve got the right structure and styles.

http://jsfiddle.net/cmp3R/1/

jQuery Code (for convenience/archive)

$('.slides li').each( function() {
    var height = $(this).height();
    var imageHeight = $(this).find('img').height();

    var offset = (height - imageHeight) / 2;

    $(this).find('img').css('margin-top', offset + 'px');

});

CSS Changes

You need set a height for the <li> wrapper of each slide. You can just do this in CSS.

jQuery

You get the height of the slider (ie. X) and of the image (ie. Y), get the difference, half the difference then add an inline style moving the image down by that amount. IE.

= (x-y)/2

You need to run this for each slide in the slider using each() and it should offset it the correct amount so they’re vertically centred.

I can see this being a problem if you are using the responsive features of the plugin, but could get around it by just setting different <li> heights for each screen size using @media queries.

Hope that helps.