jal
/
WebTest


			
				
					
						
						
							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> 等等，而像 &lt;div&gt; &lt;span&gt; 这样的元素是不行的。
    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>