html - CSS 在 ul 中水平居中 li

Question

我有this ul包含四个li。我希望 li 在 ul 内居中，特别是为了响应目的。我添加了一些媒体查询，但这并没有使 ul 中的 li 居中。

@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

如果你想对齐元素，去掉 float 。

#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