3

私のウェブサイト用の独自の CSS を作成するためのこのチュートリアルの例に取り組んでいると、コードに問題が見つかりました。

HTML

<div class="items">
  <div class="outerContainer">
      <div class="innerContainer">
          <div class="element"><a href="#">Finally over four lines, all the code is the same for each list</a></div>
      </div>
  </div>
</div>

CSS

.items .outerContainer
{
    height: 180px;
    width: 200px;
    background-color: #EBEBEB;
    position: relative;    
}

.items .outerContainer .innerContainer
{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    background-color:red;    
}

.items .outerContainer .innerContainer .element
{
    position: relative;
    top: -50%;
}

要素を一番上に「移動」しないtop: -50%;のはなぜですか? .items .outerContainer .innerContainer .elementたとえば私が書くtop: -20pxとうまくいきますが、私は％が欲しいです。

なんで？どうすれば修正できますか？

奇妙なことに、それはIE7でのみ動作します:)

4

1 に答える 1

4

要素をパーセンテージで移動するには、それを含む要素に高さ属性が必要です。したがって、height:90px; を入力すると、(アイテムの高さは 180px で、内部コンテナーは上から 50% である必要があるため、私が収集したものは正しいです) 動作するはずです。

于 2012-09-26T14:18:36.197 に答える