css之vertical-align(盒子垂直对齐方式)

1.vertical-align常用的值有：top、middle、bottom。

1）top

把元素的顶端与行中最高元素的顶端对齐，即顶部对齐。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 9   <title>Document</title>
10   <style>
11     body{
12         margin: 50px;
13         padding: 50px;
14         width: 400px;
15         height: 400px;
16         border: 1px solid #ccc;
17     }
18     div{
19         display: inline-block;
20         border: 1px solid red;
21     }
22     .box1{
23         width: 100px;
24         height: 100px;
25     }
26     .box2{
27         width: 50px;
28         height: 50px;
29         vertical-align: top;
30     }
31   </style>
32  </head>
33  <body>
34   <div class="box1">这是box1</div>
35   <div class="box2">这是box2</div>
36  </body>
37 </html>

结果：

注意：对齐的元素是行块元素，即display: inline-block;

2）middle

垂直中部对齐。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10   <style>
11     body{
12         margin: 50px;
13         padding: 50px;
14         width: 400px;
15         height: 400px;
16         border: 1px solid #ccc;
17     }
18     div{
19         display: inline-block;
20         border: 1px solid red;
21     }
22     .box1{
23         width: 100px;
24         height: 100px;
25         vertical-align: middle;
26     }
27     .box2{
28         width: 50px;
29         height: 50px;
30         vertical-align: middle;
31     }
32   </style>
33  </head>
34  <body>
35   <div class="box1">这是box1</div>
36   <div class="box2">这是box2</div>
37  </body>
38 </html>

结果：

注意：在使用vertical-align：middle属性时，每个盒子都要有该属性才能对齐。

3）bottom

把元素的顶端与行中最低的元素的顶端对齐。

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7     body{
 8         margin: 50px;
 9         padding: 50px;
10         width: 400px;
11         height: 400px;
12         border: 1px solid #ccc;
13     }
14     div{
15         display: inline-block;
16         border: 1px solid red;
17     }
18     .box1{
19         width: 100px;
20         height: 100px;
21     }
22     .box2{
23         width: 50px;
24         height: 50px;
25         vertical-align: bottom;
26     }
27   </style>
28  </head>
29  <body>
30   <div class="box1">这是box1</div>
31   <div class="box2">这是box2</div>
32  </body>
33 </html>

结果：

2.当盒子中没有内容时，会出现边缘对不齐的情况。

如：middle　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　bottom