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

In this issue, the editor will bring you the problem of how to parse the page text in the vertical center of the DIV+CSS layout. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

The problem of Vertical centering of Web Page text in DIV+CSS layout

Single-line text in 1.DIV+CSS layout

Set the height of the div to be the same as the line height of the text, that is, the values of line-height and height are the same. * give div an over-flow:hidden to hide the excess.

This method supports block-level and inline pole elements, as well as all browsers, but can only display one line, and is not supported in IE

The reason for using overflow:hidden in the middle is that when the user enlarges the font, it will go beyond the range of div.

Div {height:20px; line-height:20px; overflow:hidden;}

Multiline text in 2.DIV+CSS layout

It's very simple, just set the same padding-bottom and padding-top.

Div {padding-top:20px; padding-bottom:20px;}

This method supports both block-level and inline pole elements, as well as non-text content, including images, etc., as well as all browsers, but the deficiency is that the height cannot be fixed.

Now it is easier to use two methods, of course, you can also use the browser's CSShack, use less, do not talk about it.

The above is the editor for you to share how to parse the page text in the vertical center of the DIV+CSS layout, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are 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.