使用css在包装器div的中心流畅地显示水平列表

Question

我有以下html结构：

<div id = "carousel">
  <div id="wrapper">
    <div id="slides">
      <div class="upper">
        <ul>
          <li></li>
           .
           a number of li's
           .
        </ul>
       </div>
    </div>
 </div>

以及以下css

#carousel{}
#wrapper{
    background:url("transparent.png");
}
#slides{
    margin:auto;
    width:94%;
}
.upper{
    position:relative;
}
#wrapper #slides ul{
    font-size: 0.75em;
    height: 16.2em;
    left: -2.5%;
    list-style: none outside none;
    margin-bottom: 2.99%;
    margin-top: 3%;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 127.9%;
}
#wrapper #slides li {
    float: left;
    margin-bottom: 10%;
    width: 13.4%;
}

通过jquery访问.upper div并修改其宽度和位置。 （+1 li宽度，-1 li左）

问题是：虽然所有内容都水平居中，但它不能垂直居中，如果我不限制其中的ul的大小，它会膨胀到其所有li元素的大小

所以我怎么能让ul的高度为1 li，宽度为5？ 也 如何在包装div中垂直居中ul？ 以及我如何只使用％值？

Answer 1

对于垂直居中：您可以根据需要设置父div的高度，然后使用vertical-align：middle。

对于ul高度，您可以设置li的高度并将ul设置为具有相同的高度。