私はcss aliginngで理解できない振る舞い

Question

悪い英語の人には申し訳ありません... "ブロックを垂直に整列させるにはどうすればよいですか"という既知の質問に対する答えを探しました。

回答が見つかりました。しかし、途中で私は奇妙な追加vertical-align: middle;とline-height:500px;、私のブロックを中心に作った！

スニペット：

.warp-warper { 
 
    line-height: 500px; 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: black; 
 
} 
 

 
.warper { 
 
    vertical-align: middle; 
 
    margin: 15px; 
 
    display: inline-block; 
 
    width: 160px; 
 
} 
 

 
.inner-block { 
 
    line-height: normal; 
 
    display: block; 
 
    width: 100%; 
 
    height: 125px; 
 
    background-color: rgb(225, 205, 225); 
 
    border-radius: 2px 2px 0px 0px; 
 
}

<div class="warp-warper"> 
 
    <div class="warper"> 
 
    <div class="inner-block">Content</div> 
 
    </div> 
 
</div>

私はそれが動作する理由を理解するカント... 私は約line-heightとvertical-alignを読んで、この両者の間に接続しないように思われます。もう一度 - それらのうちの1つがないいくつかの奇妙な行動では、ブロックは垂直にセンタリングされませんでした。

Answer 1

彼らはare in the same section of the specification言う：

「行の高さは、」要素内の行ボックスの最小の高さを指定します。

と

このプロパティは `ラインheight`性のオフ**直接**