Home >Web Front-end >HTML Tutorial >A little research on horizontal and vertical centering of multi-line text_html/css_WEB-ITnose
A little research on horizontal and vertical centering of multi-line text_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:541192browse
I saw an article in W3CPlus a few days ago, which mentioned using CSS to create horizontal and vertical centering. When testing the sixth point, I found some small problems:
Add A meaningless new tag
<div id="extra">
When setting the content width, the text wraps
For the first point, the solution is to use: before pseudo-element:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平垂直居中</title> 6 <style> 7 .wrapper { 8 width: 200px; 9 height: 200px;10 background: skyblue;11 }12 .wrapper:before {13 content: '.';14 display: inline-block;15 vertical-align: middle;16 height: 100%;17 }18 .content {19 display: inline-block;20 text-align: center;21 }22 </style>23 </head>24 25 <body>26 <div class="wrapper">27 <div class="content">多行文字居中 多行文字居中 多行文字居中 </div>28 </div>29 </body>30 </html>
Demo attached
But! Everyone has also noticed: the text is wrapped
This is the gap caused by the inline-block causing trouble
In order to solve this problem, you can try this hack:
1 .wrapper {2 font-size:03 }4 5 .content {6 font-size:16px7 }
Save and look again:
Done!
Attached complete source code
Reference materials (recommended reading):
CSS production of horizontal and vertical center alignment
How to solve the blank spacing of inline-block elements
inline-block past life and present life