CSS 的常见任务是垂直居中文本或图像; 虽然 CSS2 不支持垂直对齐, 但我们可以通过组合一些属性来垂直居中块. 下面本篇文章就来给大家介绍一下使用 CSS 垂直居中文本的方法, 希望对大家有所帮助.
方法一: 指定将外部块格式化为表格单元格
表格单元格的内容可以垂直居中, 将外部块格式化为表格单元格就可垂直居中文本.
示例: 将段落置于具有特定给定高度的块内
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- .container {
- width: 400px;
- height: 200px;
- border: 1px solid red;
- min-height: 10em;
- display: table-cell;
- vertical-align: middle
- }
- </style>
- </head>
- <body>
- <div class="container">
这是一段测试文本!
- </div>
- </body>
- </HTML>
效果图:
方法二: 使用 line-height 属性
这是垂直对齐文本的另一种方法. 此方法适用于单行和多行文本, 但仍需要固定高度的容器:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- .container{
- height: 200px;
- line-height: 200px;
- text-align: center;
- border: 2px dashed #f69c55;
- }
- span {
- display: inline-block;
- vertical-align: middle;
- line-height: normal;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <span>
这是一段测试文本! 这是一段测试文本! 这是一段测试文本! 这是一段测试文本!
这是一段测试文本!
- </span>
- </div>
- </body>
- </HTML>
效果图:
CSS 只要调整 div 的大小, 通过将 div 的 line-height 属性设置为其高度来对齐 span, 并使 span 具有 vertical-align:middle 的内联块. 然后它将跨度的行高设置为正常, 因此其内容将在块内自然流动.
来源: http://www.css88.com/qa/css3/10315.html