In some cases, we need to center the image vertically in the div, but the CSS is only horizontally centered and the img properties are not vertically centered. How can we solve this problem?

In the table, pictures, checkboxes and other elements can be centered horizontally and vertically. What if I don't use a table? Then use div to simulate the table. Set the display :table-cell to the div style so that the div is displayed in the table table. But, this mainstream browser can, IE7 will not work. Of course, IE7 can be ignored. Look forward! There is a hack that can solve it, but it doesn't say it.

In other words, the picture and text can't be aligned when the picture and text are mixed, starting from here, give the div style, font-size:0px;vertical-align:middle; div shows the img, but also put a span tag. Other lines, so span's display is inline-block; height: 50%; img to vertical-align: middle; the bottom line of the picture and text alignment, the bottom line of the text in the div height, the font size is 0; so it is vertically centered .

Code

By Thirumani Raj posted on - 18th Jun 2018