CODEWITHSUNDEEP
jqueryhtmlcss
Jeffrey Chen
Jeffrey Chen

Reputation: 237

Centering img tag inside a li tag

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*/
}

Upvotes: 0

Views: 4303

Answers (10)

G_real
G_real

Reputation: 1157

To set Image Horizontally center in Flexslider, just make changes in flexslider.css file as below.

Find .flexslider .slides img and make changes as below.

.flexslider .slides img {
  /*width: 100%;*/ or you can use width: auto;
  display: block;
  margin: 0 auto;
}

There is no need to do all calculations.

Upvotes: 0

Rudy Huynh
Rudy Huynh

Reputation: 608

How about create a fixed-height div tag inside li tag of flexslider container

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

.mydiv{height: 200px; display: table-cell; vertical-align: middle}

Upvotes: 0

Demircan Celebi
Demircan Celebi

Reputation: 595

So I was trying to accomplish the same thing with flexslider, here's how I've done it:

var centerImage = function (sliderH, n) {
  var $current = $('.js-slider .slides li img').eq(n);

  $current.css({
    'position' : 'relative',
    'top' : (sliderH - $current.height())/2
  });
};


$('.js-slider').flexslider({
  /* 
    other flexslider parameters 
  */
  start: function (slider) {
    centerImage(slider.h, slider.currentSlide);
  },
  before: function (slider) {
    centerImage(slider.h, slider.animatingTo);
  }
});

Code is pretty self-explanatory, hope it helps!

Upvotes: 0

Krisopher
Krisopher

Reputation: 1

Here's a modified version of Tom's solution that also solves the problem of not knowing the image or <li> height.

Find the height of the tallest <li> and adjust all image <li>s to that height. 

$(document).ready(function () {
    var maxHeight = -1;

    $('.slides li').each(function () {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });

    $('.slides li').each(function () {
        $(this).height(maxHeight);
    });
});

Insert an element just before each <img>.

$(function () {
    $('img').before('<span class="vert-center"></span>');
});

Set your new element to 100% of the parent <li> and vertical align it and the image.

.slides {
    text-align: center;
    position: relative;
}
.vert-center {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slides img {
    display: inline-block;
    vertical-align: middle;
}

Check out the Demo.

Upvotes: 0

Tom Maitland
Tom Maitland

Reputation: 578

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.

Upvotes: 2

Hussein Nazzal
Hussein Nazzal

Reputation: 2557

now just to wrap this up for you , the css way .. here is what you do if you want less headaches

.image {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   height: 200px;
   margin-top: -100px; /* half the height */
   margin-left: -100px; /* half the width */
}

this type is called in line centering , which means you can apply these styles for an object in line ..

now the other way is a bit more complex but wildly used but you might see it applied using div's and changing there display to table 

html, body, #cont {
   height:100%; // set the height to be the full page  , as well as the width
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#cont td {
   vertical-align: middle;
   text-align: center;
}

html markup

<html>
<body>
   <table id="cont">
      <tr>
         <td><img src="image.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

now if you want you can search more about this topic as it is more than covered ..

for the jquery part , you can search for a plugin , or you can use the code suggested by @Aspiring Aqib

his code is more like the inline centering technique

Upvotes: 0

Cy Pangilinan
Cy Pangilinan

Reputation: 572

Try using auto margins to center horizontally affecting only the list of images. You may need to set margin-top and margin-bottom if you want to center it vertically too.

li img
{
  margin-left: auto;
  margin-right: auto;
}

Upvotes: 0

Talha Akbar
Talha Akbar

Reputation: 10030

If you want a good solution then you can use jQuery UI position() function otherwise use this query:

$(".slides li img").each( function() {
    var w = $(this).width();
    var h = $(this).height();
    var wi = $(this).parent().width();
    var he = $(this).parent().height();
    var margintb = ((he-h)/2);
    var marginlb = ((wi-w)/2);
    $(this).css({ "margin": margintb+"px "+marginlb+"px" });
});

And You can use CSS based solution using:

li img {
    margin:0 auto;
}
li {
    line-height: *px;
}

Where * is the height of li element if it has dynamic width and height then some jQuery comes into play.

$(".slides li").each( function() {
    var s = $(this).height();
    $(this).css({ "line-height" : s+"px" });
});

Upvotes: 2

Tom Maitland
Tom Maitland

Reputation: 578

I'm not sure I entirely understand your issue, because with:

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

You are making the image as wide as the slider so alignment shouldn't matter?

Regardless, within a <li> you can centre an image using margin:auto (tested with FlexSlider).

But are you trying to centre the slider itself?

EDIT: To vertically align you could try display: inline-block; vertical-align: middle;

Upvotes: 0

IanO.S.
IanO.S.

Reputation: 1382

You could try using text-align: center , on the img

Upvotes: 1

Related Questions