aims
- understanding
- Say high travel height and three relationships
- Can simply understand why the row height to the height of a single line of text is centered vertically
- application
- Implemented using single text line height vertical center
- Row height can be measured
3.1 line height measurement
Line height measurement method:
3.2 Single-line text centered vertically
We use a line of high place most is: let a single line of text vertically centered in the box.
Row height to the height of the text box.
Here a little complicated situation, began to learn, we can start with a simple place to start to learn.
High + = line distance to the next content height +
And distance to the next are always equal, so the text appears to be vertically centered.
Three relationships row height and height
- If the line of text will be centered vertically high altitude
- If the line height to the height of the text will be biased at
- If the row height is less than the height of the text will be biased on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 50px;
background-color: pink;
line-height: 50px;
}
</style>
</head>
<body>
<div> 文字垂直居中 </div>
</body>
</html>