前幾日做網(wǎng)頁布局的時(shí)候內(nèi)聯(lián)塊元素的對齊是徹底把我整蒙逼了，放好了就開始上下跳宾肺，各種對不齊溯饵，鵬哥給了個(gè)妙招叫vertical-align 不過對其的妙訣還是沒有找到，本著一顆求知的心锨用，在網(wǎng)上仔細(xì)看了看vertical-align的用法丰刊，參考黃老師的博客描述，略微了解了一些用法增拥，在此跟大家分享一下啄巧。
閑言少敘，單刀直入掌栅。
vertical-align 垂直對齊 設(shè)置元素的垂直對齊方式秩仆。W3school中給出的說明是該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線垂直對齊。所以猾封，使用塊元素又沒有更改display還理直氣壯的說咋還出不來效果的童鞋可以去捂臉了澄耍，垂直對齊的默認(rèn)屬性值是 baseline 基于基線對齊。
其中兩個(gè) img 標(biāo)簽和 span 標(biāo)簽是根據(jù)父級 div 中的文字 Writing的基線去對齊的晌缘，所以寬高齐莲、元素不同放在一行自然四處亂竄。
vertical-align還有其他屬性
text-top:元素頂端與父級文字頂部對齊
top：元素頂部與行內(nèi)高度最高的頂部對齊
middle：此元素放置在父元素的中部
text-bottom：元素底部與父級文字底部對齊
bottom：元素底部與行內(nèi)最底部元素的底部對齊
這樣解釋磷箕，很容易可以看出 vertical-align 和 text-align 的區(qū)別：text-align 是設(shè)置在父級中的元素控制子元素的布局 选酗。vertical-align 是設(shè)置在子元素內(nèi)的屬性，誰需要設(shè)置此屬性搀捷，就把這個(gè)屬性放在這個(gè)元素里
了解了vertical-align 的屬性星掰，它的應(yīng)用就好理解了
垂直居中
單獨(dú)給子集行內(nèi)元素設(shè)置 vertical-align：middle多望；而沒有其他元素時(shí)，是不會(huì)出現(xiàn)居中效果的氢烘，如果父級中存在文字怀偷，那設(shè)置middle的元素會(huì)跟文字的中間去對齊。這時(shí)播玖，我們需要一個(gè)設(shè)置為內(nèi)聯(lián)塊的 span 標(biāo)簽去輔助實(shí)現(xiàn)
來看代碼：
注意：這里將 span 元素的高度設(shè)置為父級的100%椎工，兩個(gè)子集全部設(shè)置 middle 屬性，img 標(biāo)簽就會(huì)被“帶到”中間蜀踏，產(chǎn)生垂直居中的效果维蒙。
效果圖：
當(dāng)然，第二種方法是在 table-cell 屬性元素中設(shè)置vertical-ailgn 使其在單元格中的位置發(fā)生變化果覆，在此不贅述颅痊。
相關(guān)鏈接：黃老師的博客
其中引用了一張黃老師博客的圖片，如有侵權(quán)請與作者聯(lián)系
