CSS低端對齊是在HTML標記里將某部分內容(例如圖片、文字等)垂直對齊到該行文字的底部。這樣可以增強頁面的可讀性和美觀度。
CSS提供了兩種低端對齊的方法: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屬性設置為inline-block或table-cell,同時指定vertical-align為bottom或middle。在這種情況下,元素的頂部或底部將與所在行的基線上對齊。
使用line-height需要先為容器元素設置一個固定高度,再將文本的行高設置為相同的高度。此時,元素的中線將與行高相等,同時也與容器底部對齊。要使其中的圖片或文字垂直居中,需要給其設置vertical-align為middle。
需要注意的是,以上兩種方法的適用條件和效果都不盡相同,需要根據實際情況選擇合適的方式。