如何让div中的图片垂直居中对齐?

2024年11月23日 07:41
有2个网友回答
网友(1):

分两种情况:
1、图片宽高固定,这种情况很简单。

水平居中:就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中:自己算出(div的高度-图片的高度)/2,得到margin-top值即可。

2、图片高度未知,这个布局比较难实现。一般我是用js做的。

水平居中:同上,在图片的css中加 dispaly:block;margin:0 auto;

垂直居中:用js算出(div的高度-图片的高度)/2,得到margin-top值赋给它。

网友(2):

图片水平垂直居中情况很多,最简单的办法是吧图片设置为背景,给背景设置background-position:center;

如果只能用图片

分两种情况:
1.图片宽高固定,这种情况很简单。
水平居中:就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中:自己算出(div的高度-图片的高度)/2,得到margin-top值即可。

2.图片高度未知,这个布局比较难实现。一般我是用js做的。
水平居中:同上,在图片的css中加 dispaly:block;margin:0 auto;
垂直居中:用js算出(div的高度-图片的高度)/2,得到margin-top值赋给它。

曾经研究过网上的很多方法,个人觉得这个是最有效的了。