當(dāng)我們需要將文本置于底部時(shí),CSS提供了幾種方式實(shí)現(xiàn)。
一種方式是使用CSS的flexbox布局。在父元素中設(shè)置display為flex,justify-content為space-between,align-items為flex-end,即可將子元素放置于底部。代碼如下:
.parent { display: flex; justify-content: space-between; align-items: flex-end; }
另一種方式是使用絕對(duì)定位。在父元素中設(shè)置position為relative,在子元素中設(shè)置position為absolute,bottom為0,即可將子元素放置于底部。代碼如下:
.parent { position: relative; } .child { position: absolute; bottom: 0; }
還有一種方式是使用line-height屬性,將其值設(shè)置為與父元素的高度相同。這樣,文本就會(huì)被垂直居中,并緊貼著底部。代碼如下:
.parent { height: 50px; line-height: 50px; }
以上三種方式都可以將文本置于底部,選擇哪種方式自主決定。