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..

    How to unfold or close content in html/JS - always assigned to different id

    How do you get the width of an element without a defined width?

    how can I use the CSS selector to solve this [duplicate]

    Dropdown Menu will move all
    Below. How to prevent it?

    How do I create a 'linklist' like a tooltip with HTML and CSS or jQuery and CSS?

    How do I get two divs next to eachother, but spaced?

    How to get the CSS attributes from a control located by XPath using Selenium IDE

    How to center a border-width shape properly, relative to its parent input button?

    How can I do width = 100% - 100px in CSS?

    How to align multiple images in “li” on center

    How to use several css classes to one element?

    How to get the child of a parent div element

    How to center an input tag in fieldset when using codeigniter?

    How to change css class for the inputfield and label when validation fails?

    CSS: How to decrease the margin of my paragraphs inside a div?

    PHP How to not cache generated HTML but cache static data like images/js/css

    Google font shows boxes in Internet Explorer 8 - IE 8

    How do I style HTML in a JEditorPane?

    How to Display a div on mouse-over using jquery ?

    How to repeat multiple images over one element using CSS

    How bad is to store all background images in CSS?

    How can mono social icon work without a class per icon?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    how to trim css code to just one line [closed]

    how to restrict the children element inside the parent element in css?

    How can I get this CSS to display properly in IE8?

    How to let user change text font and colour in WordPress WSIWYG text editor

    How to hide href attribute of tag via css when using window.print

    Hide/Show Content at Specific Scroll Positions

    How to simplify CSS code