vertical-align 的理解

1.vertical-align 属性和值列表

2.兼容性

3.vertical-align 的使用条件

  • 作用于inline-block水平的元素（注意：当两个inline-block元素是同级元素时吗，两元素才能实现垂直居中，如例2）
  • 例如图片，按钮，单复选框，单行/多行文本框等HTML控件
  • 实际作用中讲父元素设置为  display: table-call （注意：此属性可以时父元素下的子元素垂直居中,如例1）
  • inline-block元素会根据文档流上一个元素的 vertical-align属性来设置自身基于上一个元素基线的位子（此处的上一个元素，不是同级上一个元素，是文档加载的上一个元素，具体看例3）

4.例子

---设置父元素 display:table-cell 实现垂直居中

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>vertical-align实现垂直居中例子</title>
 6     </head>
 7     <body>
 8         <div style="width: 400px;height: 400px;border: 1px solid #000000;display: table-cell;vertical-align: middle;">
 9             <div style="width: 100px;height: 100px;border: 1px solid #000000;"></div>
10         </div>
11     </body>
12 </html>

 

---使用父元素::before 实现垂直居中

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>vertical-align使用父元素::before 实现垂直居中例子</title>
 6         
 7         <style>
 8             .test{
 9                 width: 400px;height: 400px;
10                 border: 1px solid #000000;
11             }
12             .test::before{
13                 content: '';
14                 display: inline-block;
15                 height: 100%;
16                 vertical-align: middle;
17             }
18             .test2{
19                 border: 1px solid #000000;
20                 vertical-align: middle;
21                 width: 100px;
22                 height: 100px;
23                 display: inline-block;
24             }
25         </style>
26     </head>
27     
28     <body>
29         <div class="test" >
30             <div class="test2"></div>
31         </div>
32     </body>
33 </html>

 ---inline-block元素水平排列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vertical-align使用父元素::before 实现垂直居中例子</title>
        
        <style>
            .test{
                width: 400px;height: 400px;
                border: 1px solid #000000;
                display: inline-block;
            }
            .test::before{
                content: '';
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            .test2{
                border: 1px solid #000000;
                vertical-align: middle;
                width: 100px;
                height: 100px;
                display: inline-block;
            }
            
            .test5{
                border:1px solid red;
                width: 100px;
                height: 100px;
                display: inline-block;
            }
            
            .test3{
                width: 400px;
                height: 400px;
                border: 1px solid #000000;
                
                display: inline-block;
                vertical-align: middle;
            }
            
            .test4{
                border: 1px solid #000000;
                vertical-align: middle;
                width: 100px;
                height: 100px;
                display: inline-block;
            }
        </style>
    </head>
    
    <body>
        
        <!--
            描述：inline-block 相互影响
        -->
        <div class="test" >
            <div class="test2"></div>
        </div>
        <div class="test5"></div>
        
        
        
        <!--
            描述：inline-block 水平排列
        -->
        <div class="test3">
            
        </div>
        <div class="test4">
            
        </div>
    </body>
</html>

 

posted @ 2016-05-09 11:05  好叶叶孤城  阅读(229)  评论(0)  编辑  收藏  举报