前端 - 如何让img在div居中，img比div还长

Question

如果下面代码

<p style="height: 100px; overflow： scroll" >
    <img src="img" style="height: 200px; />
</p>

请问如何让img总是居中，尤其是img的height比p 的height还大,image还是居中。
因为p的overflow是scroll的所以图片的上部和下部看不见，但是 p里面显示的还是图片的中部。请从css角度思考。

谢谢

Answer 1

Your code always looks awkward. Take a closer look at the colon ":" in the first line. Is it a Chinese colon? There is also a quotation mark missing in the style of the second line? That's why the third line is highlighted. It looks like there are problems...

Show picture:

<p style="height: 100px; overflow: hidden;  width:100px" >
    <img src="img" style="height: 200px; width:200px; margin-top: -100px; margin-left: -100px;" />
</p>

Answer 2

If img is longer than p
1. Set img width as percentage
2. Set text-align of p: center

Answer 3

If you have problems with centering, you can try flex box It’s so simple.

Answer 4

Negative comments mixed styles are written in the tags 嘤嘤嘤

Answer 5

Hahahaha your answer is so funny!