0

私は次の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 リー、幅を 5 にするにはどうすればよいでしょうか。また、ラッパー div で ul を垂直方向に中央揃えするにはどうすればよいですか? ％値のみを使用して両方を行うにはどうすればよいですか？

4

1 に答える 1

1

垂直方向のセンタリングの場合: 親 div の高さを必要なサイズに設定してから、vertical-align: middle を使用できます。

ul の高さについては、li の高さを設定し、ul を同じ高さに設定できます。

于 2013-01-02T13:22:58.980 に答える