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>