我有this ul包含四个li。我希望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;}
}
答案 0 :(得分: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 强>
答案 1 :(得分: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;
}
&#13;
<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>
&#13;
答案 2 :(得分:0)
ul{
border: 1px solid black;
text-align:center;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
这是你的意思吗?