CSS horizontaly中心li在ul

我有this ul包含四里。我希望li能够集中在ul内部，特别是为了响应目的。我已经添加了一些媒体查询，但是这不会在ul中居中。CSS horizontaly中心li在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;} 

}

来源

2017-01-11 Fjott

您需要发布完整的标记，这里显示的问题，而不是一个第三方网站，其能改变或消失明天帮助没有人。此外，你不清楚你想要集中在哪个里。 – Rob

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>

来源

2017-01-11 19:57:01 Piou

如果你想对齐元素，摆脱浮动。

#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

来源

2017-01-11 19:55:03 Scott

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

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

这是你的意思？

来源

2017-01-11 19:55:29 jmag

CSS horizo​​ntaly中心li在ul

回答

相关问题

CSS horizontaly中心li在ul