CSS基础(part17)--vertical-align垂直对齐
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part17)--vertical-align垂直对齐
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
參考自：pink老師課堂筆記
文章目錄
- vertical-align垂直對齊
- 圖片、表單和文字對齊
- 去除圖片底側空白縫隙
vertical-align垂直對齊
vertical-align可以控制元素垂直對齊，但它只針對于行內元素或者行內塊元素，不影響塊級元素中的內容對齊，我們也可以通過設置該屬性控制圖片/表單與文字的對齊。
語法：
vertical-align : baseline |top |middle |bottom圖片、表單和文字對齊
我們可以通過vertical-align控制圖片和文字的垂直關系了，默認的圖片會和文字基線對齊：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>div {border: 2px solid red;}.one {vertical-align: baseline;}.two {vertical-align: bottom;}.three {vertical-align: middle;}</style> </head> <body><div><img src="image/TX.jpg" class="one" width="200px"> 安徽財經大學</div><div><img src="image/TX.jpg" class="two" width="200px"> 安徽財經大學</div><div><img src="image/TX.jpg" class="three" width="200px"> 安徽財經大學</div> </body> </html>頁面：
去除圖片底側空白縫隙
首先，我們看一個示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>div {border: 2px solid red;}</style> </head> <body><div><img src="image/TX.jpg" class="one" width="200px"> 安徽財經大學</div> </body> </html>頁面：
我們可以清楚的看到，圖片下面多了一條縫隙，現在，我想把它去除，就可以給vertical-align屬性設置top |middle |bottom屬性值：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定位</title><style>div {border: 2px solid red;}img {vertical-align: top;}</style> </head> <body><div><img src="image/TX.jpg" class="one" width="200px"> 安徽財經大學</div> </body> </html>頁面：
總結
以上是生活随笔為你收集整理的CSS基础(part17)--vertical-align垂直对齐的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 86 上山了！漂移竞速赛车游戏《DRIF
- 下一篇： CSS基础(part18)--溢出的文字