How to perfectly center contents in an unordered list?


Tags: css,css3

Problem :

I have an unordered list of items and I want to make the contents perfectly centered on the page, no matter what the breakpoint/screen dimension is. I don't know in advance how many items there will be. Does anyone know how I can accomplish this using just CSS? I know this can be done with JavaScript, but I prefer using just CSS if possible.

Screenshot: enter image description here

Link: http://jsfiddle.net/wrf39qev/1/

<ul>
    <li><img src="http://lorempixel.com/230/265/city/1"></li>
    <li><img src="http://lorempixel.com/230/265/city/2"></li>
    <li><img src="http://lorempixel.com/230/265/city/3"></li>
    <li><img src="http://lorempixel.com/230/265/city/4"></li>
    <li><img src="http://lorempixel.com/230/265/city/5"></li>
    <li><img src="http://lorempixel.com/230/265/city/6"></li>
    <li><img src="http://lorempixel.com/230/265/city/7"></li>
    <li><img src="http://lorempixel.com/230/265/city/8"></li>
    <li><img src="http://lorempixel.com/230/265/city/9"></li>
    <li><img src="http://lorempixel.com/230/265/city/10"></li>
</ul>       


Solution :

Something like this? ul comes with a default padding and margin and you need to specifically remove it.

Edit

Set a width to the ul, added margin:auto and floated the elements to the left. Does this help?

Edit : 2

Set display block to images and set width : 100% , height auto;

Edit:3

You can add width of 33% to the li(s) to ensure that the gap is same on either side. However if you want the gap to be the same and also if you want to fit as many images as possible, you will have to use media queries at breakpoints. Meaning, you need to write something like, "from this width to that width, I will need 5 images in one column hence (20%)" and so on. That is the only way.

This will move the content to the center and left align the items.

ul { list-style-type: none;margin:0;padding:0; width:90%; display:block;margin: auto;}
li { 
    display: block;
    float:left;
    padding: 10px;
    width:50%;
    box-sizing:border-box;
}


img{
   display:block;
   width:100%;
   height:auto;
  }


@media only screen and (max-width:1200px){
    li{
        width:25%;
      }
  }


@media only screen and (max-width:900px){
    li{
        width:33%
      }
  }
<ul>
    <li><img src="http://lorempixel.com/230/265/city/1"></li>
    <li><img src="http://lorempixel.com/230/265/city/2"></li>
    <li><img src="http://lorempixel.com/230/265/city/3"></li>
    <li><img src="http://lorempixel.com/230/265/city/4"></li>
    <li><img src="http://lorempixel.com/230/265/city/5"></li>
    <li><img src="http://lorempixel.com/230/265/city/6"></li>
    <li><img src="http://lorempixel.com/230/265/city/7"></li>
    <li><img src="http://lorempixel.com/230/265/city/8"></li>
    <li><img src="http://lorempixel.com/230/265/city/9"></li>
    <li><img src="http://lorempixel.com/230/265/city/10"></li>

</ul>


    CSS Howto..

    How to use CSS to create the left - right alignment so the left div does not push the right div

    how to resize background image of body in aspx page

    CSS - How to center Absolute Position div with max width in IE9,10,11

    how to make css dropdown menu a dropup menu

    How to make responsive popup div?

    How to use Javascript to get a visitors monitor resolution?

    How to make a responsive div stick to page edge

    How do I overlap PNG images for a “build your own t-shirt” product display page - javascript/css/asp

    How to position a set in Raphael SVG?

    How to use absolute positioning without overlap effect

    Fullpage.js: How to add css class “active” to slide anchor

    How to change the mouse cursor over an embedded flash?

    How to align/move Vaadin buttons

    How to switch between multiple CSS animations?

    How to set size of SVG image in :before pseudo-class?

    How to make all the rows of a table the same height as the biggest one

    How to get website to show better in iPhone and iPad? (width too little)

    How can I make a Div that stays on its position?

    How to make a small icon using css?

    how to make css hover just only in a bullet area

    How to link css to html in an express project?

    How to apply table css to this structure?

    How do I get pictures side by side (responsive)

    How to arrange input elements to columns or other way to improve form readability

    How to create a absolute element overlapping several rows in a calendar (table) design?

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    How can I create a “tooltip tail” using pure CSS?

    How to provide some space between two lines of same text in css

    css animation how to get the ball to bounce

    How do i select all nodes and apply a css style to all of them, D3