css2--垂直对齐

标签：底部   ora   并且   ott   高度   使用场景   inline   height   vertica   

## CSS2 vertical-align 垂直对齐

    - baseline   默认值.基于基线对齐
    - middle     位于同一行的非衬线字体小写字母的 1/2 处.不要为父元素设置高度和行高      
    - top           位于父元素一行的顶部
    - bottom    位于父元素一行的底部
    - text-top   位于同一行的文本的顶部
    - text-bottom 位于同一行的文本的底部
    - super       位于同一行的sub元素文本的基线对齐 ^上角标
    - sub          位于同一行的sub元素文本的基线对齐 _下角标 
    
- 使用 vertical-align 在一行内，行内元素在垂直方向的对齐位置。
- vertical-align: 只能设置行内元素（inline inline-block)

#### 垂直居中对齐

    vertical-align: middle;
    text-align: center;

#### vertical-align 使用场景1： 一行内的垂直方向对齐

####  vertical-align 使用场景2： 多行内的垂直方向对齐 
1. 为要垂直居中的子元素设置 ````vertical-align:middle````样式
2. 为该元素的父元素设置````display: table-cell````,并设置固定的高度
3. 然后再设置 ````vertical-align:middle````和水平对齐````text-align: center````
4. 当其元素设置为 ````display: table-cell````.并且宽度清零时，需要为父元素添加display: table;，并设置宽度100%

**可以把元素的所有内容（文本，子元素-inline, inline-block）都在垂直方向居中**

**在局部布局中使用display:table-cell;以减少对整体布局的影响**

                height: 200px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            img{
                width: 100px;
            }
        
    
        
        
        

            

                
            

        

css2--垂直对齐

标签：底部   ora   并且   ott   高度   使用场景   inline   height   vertica   

原文地址：http://www.cnblogs.com/huifang/p/7341827.html