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

Editor to share with you how to achieve the center of DIV pictures, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

DIV image centering method

Everyone should know that whether the DIV image is centered or the text is centered, it is easy to center horizontally in DIV, but it is difficult to center vertically. Today, an accidental attempt allowed me to solve this problem. First, take a look at the summary of the center of DIV text and the center of DIV images in CSS.

1. The individual text is centered vertically. We only need to set the CSS style line-height property.

2, the text and the picture in the same row, set the DIV height while the CSS style of the picture "img" style set vertical-align:middle vertical center properties, such as .yangshi img {vertical-align:middle;}.

If you want to center the DIV image, there are two properties involved here, one is line-height and the other is vertical-align. In IE, you only need line-height to achieve this effect, but if you want to achieve this effect in firefox and opea, you must use vertical-align, and this property must be defined on image, not on div.

Take a look at the following code for centering DIV images in IE and Firefox browsers:

The code in IE:

Div {height:100px; line-height:100px;} divimg {vertical-align:middle;/*optional*/}

The code for Firefox:

Div {height:100px; line-height:100px;} divimg {vertical-align:middle;} above are all the contents of the article "how to achieve the Center of DIV Pictures". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.