CODEWITHSUNDEEP
htmlcssimagelistalignment
Beast_Code
Beast_Code

Reputation: 3257

How do I center images inside a list?

How do I align a list of images to be centered? I have them 25 pixels apart from each other. They are displaying inline. Now I want to center them on the page. Right now they are shifted left.

HTML

<div class="thumbnail-photos">
  <ul>
      <li><img src="images2.jpg height="100" width="100" /></li>
      <li><img src="images2.jpg height="100" width="100" /></li>
      <li><img src="images2.jpg height="100" width="100" /></li>
      <li><img src="images2.jpg height="100" width="100" /></li>
  </ul>
</div>

CSS:

.thumbnail-photos ul li {
    display: inline;
    margin: 25px;
}

I tried text-align: center; in .thumbnail-photos ul li and .thumbnail-photos ul li img

Upvotes: 0

Views: 90

Answers (2)

blurfus
blurfus

Reputation: 14041

Try this to center on page - the trick is to specify a width to the wrapper container:

.thumbnail-photos {
    width: 900px; /* any width you want */
    margin: 0 auto;     
}

Fiddle

Upvotes: 2

Binita Lama
Binita Lama

Reputation: 1278

Please update the following css.

.thumbnail-photos ul li {
display: inline-block;
margin: 25px;
width:120px;/*---any specific width to check----*/
}
.thumbnail-photos ul li img {
display:block;
margin:0 auto;
}

Upvotes: 1

Related Questions