我試圖通過垂直設置的行高度等於DIV高度對齊一個div一些文本。當div中只有文本時，以及div中有一個小圖像時，這種方式很有效。但由於某種原因，當div中存在超過一定大小的圖像時，它會開始向下推文本。 Check out this fiddle我用來證明它。爲什麼img標籤將線高度的垂直線對齊？
小提琴中有4個div，全部有height: 40px和line-height:40px。唯一的區別是在第2，第3 &第四的div也有小型，中型和大型的圖片：
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
那麼，爲什麼在第三第四圖像搞亂了垂直對齊方式？
您需要將vertical-align: middle添加到您的img標籤中，因爲它不是inline元素，它的inline-block元素。
查看更新Fiddle
注您的垂直對齊方式將無法正常工作時，你的文字將超過1行。使用用於比flexbox，真的有好東西:)
垂直對齊是那些東西，他們從來沒有得到完全正確一個 - 嘗試谷歌搜索周圍的一些文章。
我的即時反應在這裏是嘗試垂直對齊：中每個圖片的 - 但不保證 - 我一直有做實驗，你可能會從不同的瀏覽器不同的結果。
我發現的唯一一個瀏覽器中的答案是創建一個2列表（也許在div框內，但不一定），並將文本放在一個單元格中（文本自動垂直居中放置在表格單元格中），然後把匹配的圖像放在下一個單元格中（它會自動擴展到圖像的高度）。
是不是表的輝煌？ （有些人不這麼認爲...）
有每個圖像下方的小空間。默認情況下，圖像以內聯方式呈現（實際上是內聯塊），就像一個字母。它與其他字母坐在同一行上。該行下方有空格，用於顯示字母如j，p和q的下行字符。
您可以調節圖像的垂直對齊到別處定位。在這種情況下，vertical-align: middle;會很好。
這個答案說明了問題的細節：Mystery white space underneath image tag
是啊，我是Flexbox的的忠實用戶，但我產生在電子郵件中使用HTML，許多電子郵件客戶端忽略Flexbox的。所以我必須解決這個問題。 –