The problem of the vertical center of the page text in the DIV+CSS layout

css| Page | questions

1. Single text

Set the height of the div is the same as the line height of the text can be, that is, line-height and the height of the value is the same, and finally give Div a over-flow:hidden, so that the excess part of the hidden.

This method supports block-level and inline-pole elements as well as all browsers, but only one row, and IE does not support the center of < img >, the reason to use Overflow:hidden is because when the user enlarges the font, the word will go beyond the scope of the Div.

div{
height:20px;
line-height:20px;
Overflow:hidden;
}

2. Multiple lines of text

It's 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 pictures, and so on, and all browsers are not enough to fix the height

Now more useful on the two methods, of course, you can also use the browser CSS hack, using less, not much to say.