Implement vertical centering of DIV container in CSS_html/css_WEB-ITnose

1.vertical-align: middle vertical alignment

Such as , , , etc. in table elements, and like do not have the valign attribute, so vertical-align will not work on them.

2.text-align:center Text is centered horizontally

1. Single-line vertical centering

If there is only one line of text in a container, implement it on it Centering is relatively simple. We only need to set its actual height to be equal to the line-height of the row it is in. Such as:

ExampleSourceCode

DIV{ height:25px; line-height:25px; overflow:hidden; //The setting of overflow:hidden is to prevent the content from exceeding the container or causing automatic line wrapping} However, in Internet Explorer 6 In and below versions, this method does not support vertical centering of images.

2. Vertical centering of multiple lines of text of unknown height

If the height of a piece of content is variable, then we can use the last element used to implement horizontal centering mentioned in the previous section. The first method is to set the Padding so that the upper and lower padding values ​​are the same. Again, this is a way of "looking" vertical centering, it's just a way of making the text completely fill the

. You can use code similar to the following:

DIV{ padding:25px; }

The advantage of this method is that it can run on any browser, and the code is very simple, but the prerequisite for the application of this method is a container The height must be scalable.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn