| 123456789101112131415161718192021222324252627 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>使用 line-height 对单行文本进行垂直居中</title>
- <style>
- #box {
- width: 300px;
- height: 300px;
- background: #ddd;
- line-height: 300px;
- }
- </style>
- </head>
- <body>
- <h1>使用 line-height 对单行文本进行垂直居中</h1>
- <p>
- 要注意的是，line-height (行高) 的值不能设为 100%，我们来看看官方文档中给出的关于 line-height 取值为百分比时候的描述：“基于当前字体尺寸的百分比行间距”。也就是说，这里的百分比并不是相对于容器元素尺寸而言的，而是相对于字体尺寸。
- </p>
- <div id="box">test vertical align</div>
- </body>
- </html>
|
