3. vertical-align 垂直對齊

• 有寬度的塊級元素居中對齊，是margin: 0 auto;
• 讓文字居中對齊，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性。

vertical-align 垂直對齊，它只針對于行內元素或者行內塊元素，

vertical-align : baseline |top |middle |bottom

設置或檢索對象內容的垂直對其方式。

• 注意：

  vertical-align 不影響塊級元素中的內容對齊，它只針對于行內元素或者行內塊元素，

  特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。

3.1 圖片、表單和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關系了。 默認的圖片會和文字基線對齊。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BV9l9lx3-1588749171244)(media/1498467742995.png)]

3.2 去除圖片底側空白縫隙

• 原因：

  圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。

  就是圖片底側會有一個空白縫隙。

• 解決的方法就是：

  • 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。
    

    ?

  • 給img 添加 display：block; 轉換為塊級元素就不會存在問題了。
    

總結

以上是生活随笔為你收集整理的九、一篇文章帮助你读懂CSS属性：vertical-align 垂直对齐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。