在CSS中,想要圖片居下并不難,有許多種方法可以實現(xiàn)。以下是其中兩種比較常見的方式:
/* 方法一:使用position和margin-top */ img { position: relative; top: 50%; margin-top: -圖片高度的一半; } /* 方法二:使用flexbox */ .container { display: flex; align-items: flex-end; } .container img { align-self: flex-end; }
方法一使用了position屬性來定位圖片的位置,top值設(shè)為50%可以將圖片的頂部移動到容器垂直方向的中心。然后通過margin-top設(shè)為圖片高度的一半來使圖片向下偏移,從而實現(xiàn)圖片居下。
方法二使用了flexbox布局。在容器中設(shè)置display:flex,然后通過align-items:flex-end來將容器底部與父元素底部對齊。接著,將圖片的align-self屬性設(shè)為flex-end,就可以使圖片位于容器底部。
上一篇css中圖片左右滾動
下一篇css中圖片按鈕怎么移動