私のウェブサイト用の独自の 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でのみ動作します:)