CSS горизонтальный центр li в ul

Question

У меня есть this ul, содержащий четыре ли. Я хочу, чтобы li был сосредоточен внутри ul, особенно для гибкой цели. Я добавил некоторые медиа-запросы, но это не центрирует ли в 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

CSS Flexbox позволяет сделать это из коробки:

#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; 
 
}

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

Answer 2

Избавьтесь от поплавка, если вы хотите выровнять элемент.

#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 3

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

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

Это то, что вы имели в виду?