In the w3cplus see the horizontal vertical with CSS, in the test of the 6th found some small problems, for this solution is as follows, interested friends can refer to the following
A few days ago in W3cplus saw an article, mentioned using CSS to make horizontal vertical center, in the test of the 6th time found some small problems:
Added a new, meaningless label
Copy Code code as follows:
<div id= "Extra" >
When the content width is set, the text wraps.
For the 1th, the solution is to use: before pseudo elements:
Copy Code code as follows:
<!doctype html>
<html>
<head>
<meta charset= "Utf-8" >
<title> Horizontal Vertical Center </title>
<style>
. Wrapper {
width:200px;
height:200px;
Background:skyblue;
}
. Wrapper:before {
content: '. ';
Display:inline-block;
Vertical-align:middle;
height:100%;
}
. Content {
Display:inline-block;
Text-align:center;
}
</style>
</head>
<body>
<div class= "wrapper" >
<div class= "Content" > multi-line text center Multiple lines centered multiple lines of text center </div>
</div>
</body>
</html>
Attached Demo
But! We've all noticed: the text wraps.
This is the void that Inline-block created.
To solve this problem, you can try this hack:
Copy Code code as follows:
. Wrapper {
font-size:0
}
. Content {
font-size:16px
}
Save and see:
Get!
Complete source code attached