文本文字在DIV中垂直水準居中顯示

1，這個屬性可以圖檔，文本等在元素中垂直居中

vertical-align:middle;
           

2，但是vertical-align時而沒效果，原因是因為：vertical-align隻作用在inline-block或者inline，還有table-cell等元素内

3，總結兩種使用vertical-align居中的方法：

1.第一種

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p>
</div>

這種情況下圖檔和文字可以分行顯示文字在圖檔下面同時圖檔和文字作為整體在元素内垂直居中。
           

2.第二種

<div style="height:180px;line-height:180px;">
    <img src="02.jpg" alt="圖檔" style="vertical-align:middle;" />
    這是文本内容.
</div>

這種情況下文字是因為line-height屬性而居中，跟vertical-align屬性沒有關系。同時img對齊在middle線上，但是如果父盒子去掉了line-height屬性的話那麼将會不起作用