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 change the value depend on css animation?

    how can I center this menu with CSS

    How implement a button clear in a RadDatePicker

    how to get these two div's side by side in this container

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

    Selenium IDE - How to check that an element is (CSS) visible?

    How to change textbox style in css

    How to use CSS to position a div in the middle of the page while support a dynamic width?

    Bootstrap with custom css how to align text vertically?

    How to avoid an hover on a menu item to affect the menu items on the right

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

    How to make div's width fit content not window

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    How to change CSS attribute at all div inside td with class

    How do i rotate text in css

    How To Center Align Menu Through CSS?

    How to edit the CSS of CarrierWave's 'Choose file' button and “No file chosen” text? (Rails4)

    How to force an empty page in a paged HTML document?

    How to append a CSS rule to the another CSS rule

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How do I make a div expand to the width of the page with css?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to call a jquery funcion with a css button?

    How to make a div grow with its children when inline-blocks don't fit anymore

    How to disable webkit-text-size-adjust with JavaScript

    How to change the color of table rows once ng-repeat executed

    How to get glyphicons working in twitter-bootstrap?

    How to do like this list using
  • and CSS?
  • How to align text differently inside a single inline element with CSS?

    How to add background-image onto the first option of a dropdownlist