css - 使用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%;
}

.upper div 是通过 jquery 访问的，它的宽度和位置已修改。（+1 里宽，-1 里左）

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

那么我怎样才能使 ul 的高度为 1 li，宽度为 5？我如何在包装器 div 中垂直居中 ul？以及我如何只使用 % 值来做到这一点？

Answer 1

对于垂直居中：您可以将父 div 的高度设置为所需的大小，然后使用 vertical-align: middle。

至于 ul 的高度，可以设置 li 的高度，设置 ul 的高度相同。