Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use CSS to vertically align images in DIV. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Answer: use the CSSvertical-align attribute

You can use the CSSvertical-align attribute with the display: table-cell; on the div element to center the image vertically.

In addition, because the CSSmargin attribute does not apply to the display: table-cell; element, we wrap the containing DIV with another DIV (.outer-wrapper) and apply a margin to it. This solution is even suitable for images that are higher than the height that contains DIV.

Try this code for example »

Vertically Center the IMG in a DIV with CSS

. outer-wrapper {

Display: inline-block

Margin: 20px

}

.frame {

Width: 250px

Height: 200px

Border: 1px solid black

Vertical-align: middle

Text-align: center

Display: table-cell

}

Img {

Max-width: 100%

Max-height: 100%

Display: block

Margin: 0 auto

}

This is the end of this article on "how to use CSS to align images vertically in DIV". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.