vertical-alignが正しく動作しません

Question

私はcssについての本を読んでおり、これは私を混乱させます。私はここに私のコードは、テキストを垂直方向に中央揃えにしたい：

img { 
 
    vertical-align: middle; 
 
} 
 
#mySpan { 
 
    background-color: red; 
 
} 
 

 
/* this works fine but when I type the code I first tried */ 
 
#mySpan { 
 
    background-color: red; 
 
    vertical-align: middle; 
 
}

<p> 
 
    <img src="zemin.jpg" alt="Zemin"> 
 
    <span id="mySpan">Align Vertically</span> 
 
</p>

これは動作しません。これを説明できますか？他の要素へのalignの設定は機能しますが、それを要素に直接設定するのはなぜですか？

Answer 1

このプロパティは、テキスト内のイメージ（インラインブロック）を整列することに関するものです。要素がテキストフロー内でどのように配置されるかを決定します。テキストフロー内のテキストを整列させることはあまり意味がありません。はテキストフローです。

も参照してくださいvertical-align

あなたはそれinline-block作る場合は、スパンに垂直方向の配置を適用することができますが、それはあなたが好きな振る舞いだ場合、私は疑問です。いくつかの例を以下に見つけることができます：

p { 
 
    background-color: #ffdddd; 
 
    line-height: 2em; 
 
} 
 
.mySpan { 
 
    background-color: red; 
 
    vertical-align: middle; 
 
    height: 1em; 
 
    display: inline-block; 
 
} 
 
.mySpan.top { 
 
    vertical-align: top; 
 
    height: 3em; 
 
} 
 

 
img { 
 
    vertical-align: middle; 
 
} 
 
#mySpan { 
 
    background-color: red; 
 
}

<p> 
 
    <img src="zemin.jpg" alt="Zemin">Normal text flow. <span class="mySpan">Align middle</span>. <span class="mySpan top">Align top.</span>Continuation of normal text flow 
 
</p>