How do I center images inside a list?


Tags: html,css,image,list,alignment

Problem :

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



Solution :

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


    CSS Howto..

    Once I've designed a navigation bar using CSS & html — how can I put the html code in one place so it shows in each window? [duplicate]

    How to make an arrow pointing down after a section in HTML/CSS

    How to position and style blockquote in css

    How to show mixed html and css with angularJS

    How to disable a CSS class with javascript on window.load()

    How can I change the font (family) for the labels in Chart.JS?

    Phonegap : how Control the font size of the Mobile?

    How to “zoom”/“scale” in div's content with css or jquery?

    In IE6, how to float item to right without clearing it?

    How to scroll right and left by mouse scroll button

    How to trim off Image in CSS?

    How can I apply CSS Mixins with native Javascript?

    How to stop jquery from overriding CSS color?

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to apply the grayscale jquery plugin to a background image?

    How to find the relevant stylesheet for a specific CSS code [closed]

    How to add space between CSS table rows?

    How to style a button inside asp dropdown

    Wordpress: How to add a caption right-aligned to the edge of the image

    Keeping content “fixed” under slideshow of different image sizes

    CSS - How to resize texboxes with background image when browser is resized?

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How to float: top?

    How to change/add CSS inside of iframe by jQuery

    How to make background image go in the “background” using CSS/HTML

    CSS print stylesheet generated content not showing up

    How do you create a scrolling window over a still background image with CSS?

    How does the DiggBar work?

    How to make child element width 30 precent of parent elements width using css?

    Text is too close to scroller. How to create a little bit space between scroller and text?