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)--溢出的文字