123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>display: table; 和 vertical-align: middle; 对容器里的文字进行垂直居中</title>
- <style>
- #box {
- width: 300px;
- height: 300px;
- background: #ddd;
- display: table;
- }
- #child {
- display: table-cell;
- vertical-align: middle;
- }
- #box2 {
- width: 300px;
- height: 300px;
- background: #ddd;
- display: table;
- }
- .child2 {
- display: table-cell;
- vertical-align: baseline;
- border-right: 1px solid orange;
- }
- .child2:first-child {
- font-size: 30px;
- }
- .child2:last-child {
- font-size: 50px;
- }
- </style>
- </head>
- <body>
- <h1>display: table; 和 vertical-align: middle; 对容器里的文字进行垂直居中</h1>
- <div id="box">
- <div id="child">test vertical align</div>
- </div>
- <pre>
- vertical-align 属性只对拥有 valign 特性的 html 元素起作用,例如表格元素中的 <td> <th> 等等,而像 <div> <span> 这样的元素是不行的。
- valign 属性规定单元格中内容的垂直排列方式,语法:<td valign="value">,value的可能取值有以下四种:
-
- top:对内容进行上对齐
- middle:对内容进行居中对齐
- bottom:对内容进行下对齐
- baseline:基线对齐
-
- 关于 baseline:基线是一条虚构的线,在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果在文本的字号各不相同时效果会更好,请看下例:
-
- </pre>
- <div id="box2">
- <div class="child2">glory</div>
- <div class="child2">glad</div>
- <div class="child2">align</div>
- </div>
- </body>
- </html>
|