如何在ul中垂直对齐li元素？

Question

我想根据屏幕宽度垂直对齐li中间的ul元素。我找到了帮助我实现目标的代码但是当我改变屏幕宽度时，我发现我的宝丽来照片已经毁了。

有些东西会影响我的代码，我无法找到原因。

＆＃13;

＆＃13;

.pics {
  list-style: none;
  position: relative;
  width: 100%;
  height: 400px;
}

.pics a {
  background: #fff;
  display: inline;
  float: left;
  width: auto;
  padding: 10px 10px 30px 10px;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 1em;
  font-weight: bold;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  -webkit-transition: all .30s;
  -moz-transition: all .30s;
  -o-transition: all .30s;
  transition: all .30s;
  position: absolute;
}

.pics img {
  display: block;
  padding-bottom: 20px;
}

.pics a:hover {
  z-index: 100;
}
.pics a:after {
  content: attr(title);
}

.pics li:nth-child(1n) a {
  -webkit-transform: rotate(30deg) scale(0.7, 0.7);
  -moz-transform: rotate(30deg) scale(0.7, 0.7);
  transform: rotate(30deg) scale(0.7, 0.7);
  top: 0%;
  left: 50%;
}

.pics li:nth-child(2n) a {
  -webkit-transform: rotate(-30deg) scale(0.7, 0.7);
  -moz-transform: rotate(-30deg) scale(0.7, 0.7);
  transform: rotate(-30deg) scale(0.7, 0.7);
  top: 0;
  left: 5%;
}

.pics li:nth-child(3n) a {
  -webkit-transform: rotate(40deg) scale(0.7, 0.7);
  -moz-transform: rotate(40deg) scale(0.7, 0.7);
  transform: rotate(40deg) scale(0.7, 0.7);
  top: 30%;
  left: 65%;
}

.pics li:nth-child(4n) a {
  -webkit-transform: rotate(-30deg) scale(0.7, 0.7);
  -moz-transform: rotate(-30deg) scale(0.7, 0.7);
  transform: rotate(-30deg) scale(0.7, 0.7);
  top: 20%;
  left: 25%;
}

.pics li:nth-child(n) a:hover {
  -webkit-transform: rotate(0deg) scale(0.9);
  -moz-transform: rotate(0deg) scale(0.9);
  transform: rotate(0deg) scale(0.9);
}

@media handheld,
only screen and (max-width: 480px) {
  .pics li {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
  }
  .pics li img {
    width: 100%;
  }
  .pics li a {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    margin: auto;
  }
  .pics li:nth-child(1n) a {
    -webkit-transform: rotate(-30deg) scale(0.5, 0.5);
    -moz-transform: rotate(-30deg) scale(0.5, 0.5);
    transform: rotate(-30deg) scale(0.5, 0.5);
    top: -10%;
    left: 0;
  }
  .pics li:nth-child(2n) a {
    -webkit-transform: rotate(0deg) scale(0.5, 0.5);
    -moz-transform: rotate(0deg) scale(0.5, 0.5);
    transform: rotate(0deg) scale(0.5, 0.5);
    top: 10%;
    left: 0;
  }
  .pics li:nth-child(3n) a {
    -webkit-transform: rotate(30deg) scale(0.5, 0.5);
    -moz-transform: rotate(30deg) scale(0.5, 0.5);
    transform: rotate(30deg) scale(0.5, 0.5);
    top: 0;
    left: -10% !important;
  }
  .pics li:nth-child(4n) a {
    -webkit-transform: rotate(-30deg) scale(0.5, 0.5);
    -moz-transform: rotate(-30deg) scale(0.5, 0.5);
    transform: rotate(-30deg) scale(0.5, 0.5);
    top: 0;
    left: 10%;
  }
  .pics li:nth-child(n) a:hover {
    -webkit-transform: rotate(0deg) scale(0.6);
    -moz-transform: rotate(0deg) scale(0.6);
    transform: rotate(0deg) scale(0.6);
  }
  ul.pics {
    margin: 0;
  }
  .pics a:after {
    font-size: 1.9em !important;
  }
}

＆＃13;

<ul class="pics">
  <li>
    <a href="http://localhost/index.php/galeria/sprzet/" title="Sprzet">
      <img src="http://lorempixel.com/300/300/sports" />
    </a>
  </li>
  <li>
    <a href="http://localhost/index.php/galeria/sprzet/" title="Sprzet">
      <img src="http://lorempixel.com/300/300/sports" />
    </a>
  </li>
  <li>
    <a href="http://localhost/index.php/galeria/sprzet/" title="Sprzet">
      <img src="http://lorempixel.com/300/300/sports" />
    </a>
  </li>
  <li>
    <a href="http://localhost/index.php/galeria/sprzet/" title="Sprzet">
      <img src="http://lorempixel.com/300/300/sports" />
    </a>
  </li>
</ul>
<!--pics -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的CSS包含一个媒体查询，该视频在调整视口大小时操纵您的内容。尝试将以下内容添加到CSS中：

@media handheld, only screen and (max-width: 480px) {
   .pics li { 
       display: block; 
   }
   .pics li a { 
       float: none; 
       position: relative; 
   }
}