Question

我有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;}

}

Answer 1

如果要对齐元素，请摆脱浮动。

#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允许您开箱即用：

＆＃13;

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

Answer 3

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

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

这是你的意思吗？

CSS视界中心li in ul

3 个答案: