Centering li elements of an unordered list using CSS

Question

My ul has a few free li elements which have images in them and I wanted to center those li elements. I tried to find the solution but am facing a hard time to figuring it out. Could you guys suggest some way of doing it. I was thinking of surrounding the ul with a div, and then centering the ul within the div. Do you think that will work? I also wanted to mention that I wanted to maintain the float left property.

Here is the code:

<ul class="thumb">
  <li><img src="photos/home9.jpg" /></li>
  <li><img src="photos/home1.jpg" /></li>
  <li><img src="photos/home3.jpg" /></li>
  <li><img src="photos/home4.jpg" /></li>
</ul>

CSS:

.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;  
}

.thumb li {
float: left;
}

.thumb li img {
height: 200px; 
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

Answer 1

You need to make your li's inline-blocks , instead of float . In short, doing so will cause your li's to take up space like a block element, but behave like an inline element, which will make them follow a text-align:center; that you will want to add to your ul element. Visually, they will appear sort of like a "centered float," for lack of a better term.

Here's the CSS and a jsfiddle ( http://jsfiddle.net/rgthree/RTt8g/ ):

.thumb {
  list-style: none;
  width: 90%;
  margin: auto;
  height: 750px;
  text-align:center; /* center inline and inline-block elements */
}

.thumb li {
  display:inline-block; /* no float; by making these inline-blocks they will center b/c their parent is text-align:center */
}

.thumb li img {
  height: 200px; 
  width: 200px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f0f0f0;
}

Answer 2

If you want to center the images, then you will need to add this:

ul {
  text-align: center;
}

If you center the ul which is a child for the div, the ul will be placed in the center, but the li items won't be. So it would be better if you place the list items in the center, you can moreover add the margin: 0; padding: 0 margin: 0; padding: 0 to the ul too! as

ul {
  margin: 0;
  padding: 0;
}

I hope this way you will have the images placed in center when there is no other margins and paddings! :)

You can try all this here: http://jsfiddle.net/afzaal_ahmad_zeeshan/b29D8/

Answer 3

If you want to keep the float:left; then you will need to add a container div to the ul with a width and margin:auto;

Here is how:

http://codepen.io/anon/pen/jneEq

But this will only cause the ul to appear centred if you set the width exactly to the width of the images.

Answer 4

can you check this up ?

I have updated the css to use text-align: center;

.thumb li {
  text-align:center;
}

http://jsfiddle.net/XZt2b/

Answer 5

If you have no luck with the other options, you can use:

li {
   display:block;
   width: 200px;
   margin: 0 auto;
}

This will make sure they are always in the middle of the available space.

Answer 6

You also might want to remove

.thumb li {
    float: left;
}

As well as consider Afzaal's answer

http://jsfiddle.net/EbCZ4/

Answer 7

One way to accomplish this is to set display: block; margin: auto display: block; margin: auto on the <img> elements.

http://codepen.io/jessegavin/pen/jBpdo

.thumb {
  list-style: none;
  width: 90%;
  height: 750px;  
}

.thumb li img {
  display: block;
  margin: auto;
  height: 200px; 
  width: 200px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f0f0f0;
}

Answer 8

I try to make it with a little bit jquery, try it:

var totalWidth = 0;
$('.thumb > ul > li').each(function(){
    totalWidth+= $(this).width();
});
$('.thumb > ul').css('width', totalWidth + 'px');

Here is full demo