How css uses line-height and text-align:center to center pictures horizontally and vertically

This article mainly introduces how css uses line-height and text-align:center to achieve the horizontal and vertical center of the picture, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Line-height and text-align:center realize the horizontal and vertical center of the picture

Setting the value of line-height to be equal to height can achieve vertical centering and text-align:center can achieve horizontal centering. The CSS code is as follows:

Div {text-align:center; width:400px; height:200px; line-height:200px; border:greensolid1px;} img {vertical-align:middle;}

Html Code:

Thank you for reading this article carefully. I hope the article "how css uses line-height and text-align:center to center pictures horizontally and vertically" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and follow the industry information channel. More related knowledge is waiting for you to learn!