ul中的CSS Horizo​​ntaly Center Li

Question

I have this ul containing four li. I want the li to be centered inside the ul, especially for responsive purpose. I have added some media queries, but this does not center the li in the ul.

@media only screen and (max-width : 589px) {

  #gallery li {float:left; display:inline-block; margin: 0 auto; margin-bottom: 40px;}

}

@media only screen and (min-width : 590px) {

  #gallery li {float:left; margin: 20px;}

}

Answer 1

Get rid of the float if you want to align the element.

#gallery {
    width:100%; 
    margin:2em auto; 
    list-style: none; 
    position:relative; 
    text-align: center; /* <----- added text-align */ }

@media only screen and (max-width : 589px) {

  #gallery li { 
     /* <----- removed float */
    display:inline-block; 
    margin: 0 auto; 
    margin-bottom: 40px;}

}

Updated Fiddle

Answer 2

CSS Flexbox allows you to do that out of the box:

 #gallery{ display: flex; flex-wrap: wrap; justify-content: space-around; list-style: none; } #gallery li { margin: 20px; padding:10px 10px 25px 10px; /*background: #f7f6f5 url(img/pattern-tile.png);*/ background: #F1EADD; /*box shadows - 2 of them!! */ -moz-box-shadow: inset 0 0 2px 8px rgba(138,138,138, 0.1), 0 0 5px 5px rgba(0,0,0, 0.3); -webkit-box-shadow: inset 0 0 8px 2px rgba(138,138,138, 0.1), 0 0 5px 5px rgba(0,0,0, 0.3); box-shadow: inset 0 0 2px 8px rgba(138,138,138, 0.1),0 0 5px 5px rgba(0,0,0, 0.3); /* setting the movement */ -webkit-transition:all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #gallery li img { width:200px; border: 1px solid #b0a995; border: 1px solid rgba(96,96,96,0.2); } #gallery li:nth-child(1), #gallery li:nth-child(4) { /* setting the end state */ -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } #gallery li:nth-child(2) { /* setting the end state */ -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } #gallery li:nth-child(3) { /* setting the end state */ -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); transform: rotate(-1deg); } #gallery li:hover { /* setting the end state */ -webkit-transform: scale(1.05) rotate(5deg); -moz-transform:scale(1.05) rotate(5deg); -o-transform:scale(1.05) rotate(5deg); transform:scale(1.05) rotate(5deg); } #gallery li a:after { display: block; padding-top: 15px; content: attr(title); text-align: center; } 

  <ul id="gallery"> <li><a href="#" title="bubbles 1"><img src="http://www.valhead.com/polaroids/img/elvis.jpg" alt="bubbles"/></a></li> <li><a href="#" title="bubbles 2"><img src="http://www.valhead.com/polaroids/img/elevator.jpg" alt="elevator"/></a></li> <li><a href="#" title="bubbles 3"><img src="http://www.valhead.com/polaroids/img/peerco.jpg" alt="elvis"/></a></li> <li><a href="#" title="bubbles 4"><img src="http://www.valhead.com/polaroids/img/strip.jpg" alt="elvis"/></a></li> </ul> 

Answer 3

 ul{ border: 1px solid black; text-align:center; } 

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 

Is this what you meant?