How to realize Vertical centering of text in CSS
This article mainly explains "how to achieve vertical text center in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve text vertical center in CSS".
CSS enables one or more lines of text to be centered vertically
In the era of table layout, there is no need to think too much about vertical centering. In cells, the default is vertical centering, one line of text is vertically centered, and three lines of text will also be vertically centered. CSS page layout, this form has changed. The text is at the top of the container by default.
As follows:
SourceCodetoRun
Div-css.net # MrJin {width:500px; height:200px; border:1pxsolid#03c; text-align:center;} CSSWebDesign-div-css.net
[you can modify part of the code before running to view the effect]
In this case, how to achieve the vertical center of the text. There are three situations:
First, if it is a single-line text, you can use line spacing to solve the problem.
This aspect has also been introduced in previous articles by div-css.net.
How to hold the Chinese text vertically in the parent element?
We add the definition of line spacing to it and get the effect of vertical centering of single-line text.
SourceCodetoRun
Div-css.net # MrJin {width:500px; height:200px; border:1pxsolid#03c; text-align:center; line-height:200px;} CSSWebDesign-div-css.net
[you can modify part of the code before running to view the effect]
Second, if it is multi-line text, the parent container does not have a fixed height.
We can use padding to solve the problem.
Set the padding of the container to the same fixed value above and below, and the height of the container increases with the increase of content.
In order to achieve the vertical center of multi-line text.
SourceCodetoRun
Div-css.net # MrJin {width:500px; padding:50px0; border:1pxsolid#03c; text-align:center;}
CSSWebDesign-div-css.net
Committed to the application and development of Web standards in China
[you can modify part of the code before running to view the effect]
Third, if it is multi-line text, the parent container has a fixed height.
This requires positioning and tagging the HTML. We do not advocate doing so.
But at present, this method can better solve the problem.
Two additional containers need to be added to the inside of the container to achieve this effect.
The settings for MrJin, MrJin_a, and MrJin_b are as follows:
ExampleSourceCode
# MrJin {position:static; * position:relative; height:300px; width:500px; border:1pxsolid#03c; * displayposition:static; * position:absolute; display:table-cell; vertical-align:middle; * display:block; top:50%; width:100%;} # MrJin_b {position:relative; top:-50%; text-align:center; width:100%;}
After this setting, the vertical center alignment will be achieved regardless of whether the text in the container is one line or multiple lines.
SourceCodetoRun
Div-css.net # MrJin {position:static; * position:relative; height:300px; width:500px; border:1pxsolid#03c; * displayRod blockplay important; displayRod tableboard important;} # MrJin_a {position:static; * position:absolute; display:table-cell; vertical-align:middle; * display:block; top:50%; width:100%;} # MrJin_b {position:relative; top:-50%; text-align:center Width:100%;} CSSWebDesign-div-css.net thank you for your reading, the above is "how to achieve vertical text center in CSS" content, after the study of this article, I believe you have a deeper understanding of how to achieve vertical text center in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
