CSS低端對(duì)齊是在HTML標(biāo)記里將某部分內(nèi)容(例如圖片、文字等)垂直對(duì)齊到該行文字的底部。這樣可以增強(qiáng)頁(yè)面的可讀性和美觀度。
CSS提供了兩種低端對(duì)齊的方法:vertical-align和line-height。
/*使用vertical-align*/ img { display: inline-block; vertical-align: bottom; } /*使用line-height*/ .container { height: 200px; line-height: 200px; text-align: center; } .container img { display: inline-block; vertical-align: middle; }
使用vertical-align需要將元素的display屬性設(shè)置為inline-block或table-cell,同時(shí)指定vertical-align為bottom或middle。在這種情況下,元素的頂部或底部將與所在行的基線上對(duì)齊。
使用line-height需要先為容器元素設(shè)置一個(gè)固定高度,再將文本的行高設(shè)置為相同的高度。此時(shí),元素的中線將與行高相等,同時(shí)也與容器底部對(duì)齊。要使其中的圖片或文字垂直居中,需要給其設(shè)置vertical-align為middle。
需要注意的是,以上兩種方法的適用條件和效果都不盡相同,需要根據(jù)實(shí)際情況選擇合適的方式。
下一篇css 下劃虛線