一、vertical-align屬性不起作用？

我們知道display也有很多屬性值，其中以inline/inline-block/block三個最常見，這代表了頁面上三種不同水平的元素。我常常會以液態/固液混合態/固態加以形象化思考，對應於現實中的事物就是：牛奶/果凍/堅果。vertical-align又稱之為“inline-block依賴型元素”，只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。所以，類似下面的程式碼就不會起作用：

span{vertical-align:middle;}
div{vertical-align:middle;}

二、vertical-align屬性是如何起作用的？

1、demo

<span class="box">
    <span class="dot"></span>
    我是一段卡哇伊的文字。
</span>

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;}

.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

來自連結