真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

    

    
    為什么？

'vertical-align'
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom |  |  | inherit
Initial:      baseline
Applies to:      inline-level and 'table-cell' elements
Inherited:      no
Percentages:      refer to the 'line-height' of the element itself
Media:      visual
Computed value:      for  and  the absolute length, otherwise as specified

分析：

父元素.ctn-block的base-line是Gg的baseline，

inline-block元素因為沒有內(nèi)部line box，也沒有設(shè)置overflow:visible，所以其baseline是底margin邊界。

四、vertical-align基于baseline的不同取值

1、baseline

將子元素盒子的baseline與父盒子的baseline對齊。

2、middle

將元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊

這里元素盒子的垂直中點容易確定，父盒子的baseline也好確定，但是x-height要進行計算得到，這個x-height就是字母x的高度。

 3、text-top

將盒子的頂端(margin-top邊界)與父盒子的文本區(qū)域頂端對齊

審查盒子看到margin-top的頂端。

審查文本，看到藍色區(qū)域的上邊界就是文本區(qū)域頂端。

最終效果就是盒子的頂端與父盒子文本區(qū)域頂端對齊。

4、text-bottom

將盒子的底端（margin-bottom邊界） 與父盒子的文本區(qū)域底端對齊

和text-top類似，不過將子元素的margin-bottom和文本區(qū)域的下邊界對齊。

5、sub

將子元素盒子的baseline降低，到適當?shù)母负凶拥南聵宋恢?/p>

子元素的baseline已經(jīng)確定了，就是margin-bottom下邊界，但是父盒子的下標位置太不好理解。。。首先需要了解下標這個概念，我們可以通過_{標簽為文字添加下標，將中的內(nèi)容修改為GgGg，就會有如下效果。}

這里就是將元素的margin-bottom下邊界和下標的baseline對齊。

6、super

將元素盒子的baseline升高，到適當?shù)母负凶拥纳蠘宋恢谩?/p>

與sub對應(yīng)，super提升到上標內(nèi)容的baseline處，首先通過^{標簽創(chuàng)建上標。}

7、percentage

百分比：升高（正值）或降低（負值）子元素盒子，具體的升高/降低數(shù)值由父盒子的line-height的值乘以百分比計算得出。如果百分比為0%，就和vertical-align:baseline一樣。

這個是相當好理解的，就相當于子元素盒子的baseline升高或降低，具體數(shù)值為百分比乘以父盒子的line-height。

本例中，父盒子的line-height為200px，所以設(shè)定25%，元素應(yīng)該上移50px。

并不是很直觀，給它加上一個transform: translate(0, 50px);【相對下移50px】，它又移到那個熟悉的位置了。

8、length

升高（正值）或降低（負值）子元素盒子。值為升高/降低的距離，如果為0，和vertical-align:baseline一樣。

以我們最常用的px作為單位，設(shè)定vertical-align:50px，效果就和上面百分比為25%（200px*25%=50px）一樣了，不做例子了。

五、vertical-align基于line box的不同取值

當vertical-align設(shè)置為top和bottom時，其就不是按照baseline進行定位了，而是根據(jù)line box進行定位。子元素盒子的頂部和底部也就是其上下margin外邊界。

1、top

將子元素盒子的頂部和其所在的line box頂部對齊

由于vertical-align:top將會讓子元素盒子頂部與line box頂部對齊，而如果line box高度小于子元素高度，line box將會被撐開。我們先用一個高度較高的元素撐開line box，然后看看效果：

可以看到，big子元素撐開了line box，而child1的margin-top外邊界緊貼在line box的頂端。

2、bottom

將子元素盒子的底部和其所在的line box底部對齊

和top類似，由于big用于撐開line box，可以不必修改其vertical-align的值，僅修改child1為vertical-align:bottom，效果：

六、inline元素下方可能會有一點空隙

例子：嘗試將li元素在垂直方向上進行對齊的話，這個現(xiàn)象非常常見

    
    
    
        ul{
            background-color: bisque;
        }
        .box { display: inline-block;
            width: 100px;
            height: 100px;
            background-color: aliceblue;
            /*     vertical-align: middle;*/
        }
    





    
    
    

 1、垂直空隙

因為li元素默認vertical-align:baseline，而baseline的下方會給字母的一部分留出空間，因此會產(chǎn)生一個空隙，要產(chǎn)生理想的效果，解決方案就是改變line box的baseline位置，比如將這些li設(shè)置為vertical-align:middle?！総ip:加一個x效果更明顯】

2、水平空隙

li元素的水平空隙是因為換行引起的，這個換行會變成一個空白，這個空白會被解析為DOM中的文本節(jié)點。比如像下面醬紫的代碼。

效果如下：因為前2個li之間沒有空白，而2和3個li之間有空白。

但是上面的代碼可讀性太差，也不美觀，一般這樣寫

我們用一個注釋節(jié)點代替空白（文本節(jié)點），而注釋節(jié)點渲染的時候是不渲染的。了解更多DOM中的節(jié)點類型，可看我的另一篇文章《DOM》。

七、vertical-align:middle讓元素下移而不居中的問題分析

1、問題

現(xiàn)在有三個inline-box塊，高度分別為100px，200px，300px，想讓高度為100px的塊垂直居中，于是寫出了如下代碼：  

    .ctn-block{
        background-color: #bbb;
    }
    .ctn-block .child {
    display: inline-block;
    width: 100px;
    background-color: aliceblue;
}
.ctn-block .child-1 {
    height: 100px;
/*    vertical-align: middle;*/
}
.ctn-block .child-2 {
    height: 200px;
}
.ctn-block .child-3 {
    height: 300px;
}


    
     
    

給中間div加上vertical-align:middle，效果變?yōu)樯蠄D二的樣子——child-1元素下移了，但是卻沒有居中。

2、原因

從上面可以指定，vertical-align:middle的定位方式是：將子元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊。

子元素盒子的中點很好算，而父盒子的baseline加上父盒子的x-height一半位置又是什么呢？

首先計算父盒子的baseline：三個子元素的baseline走在一條直線上，就是child-2和child-3的底部。

然后加上父盒子的x-height：由于chrome下默認font-size是16px，而font-family:sans-serif，所以x-height的一半大概是3-4px，綜上，按照如下方式對齊：

3、 解決方案

 一種方式是將最高的元素設(shè)為vertical-align:middle。

然后將想要居中的也設(shè)定為vertical-align:middle，其他的根據(jù)需要設(shè)定vertical-align:top/bottom。

原理有點抽象：

首先明確一點：最高元素設(shè)定為vertical-align:middle后，這個元素對于line box來說，baseline就是其中線。

其他元素設(shè)置vertical-align:top/bottom后，它們不影響line box的baseline，所以再將需要設(shè)定垂直居中的元素也設(shè)定為vertical-align:middle，它們的baseline必然在最高元素的baseline之上，所以會會被強制下移，進行居中。

.ctn-block .child-1 {
        height: 100px;
        vertical-align: middle;
    }
    .ctn-block .child-2 {
        height: 200px;
        vertical-align:top;
    }
    .ctn-block .child-3 {
        height: 300px;
        vertical-align: middle;
    }

4、衍生的一種可行的垂直居中方案

為父元素設(shè)定一個偽元素：：after,其高度為父元素的高度，display:inline-block,將其設(shè)定為vertical-align:middle即可撐開line box，同時line box的baseline為父元素高度一半的位置。然后設(shè)定子元素vertical-align:middle，即可實現(xiàn)居中。

考慮兼容性的話，這里需要使用一些hack，由于IE8不支持::after偽元素，所以需要一個span來替代。而display:inline-block亦需要hack。 

八、其他應(yīng)用

ico和文字對齊

    .pop-viphead-nologinbox {
        width:500px;
    }

    .pop-viphead-nologin-icon {
        display:inline-block;
        width: 14px;
        height: 14px;
        background: url("images/not_login_tip_ico.png") no-repeat;
    }

    .pop-viphead-nologin-txt {
        display: inline-block;
        color: #333;
        font-size: 12px;
        margin-left:2px;
    }

    .pop-viphead-nologin-btn {
        display: inline-block;
        margin-left: 3px;
    }

    .pop-viphead-nologin-btn a {
        display: block;
        width: 76px;
        height: 25px;
        line-height: 25px;
        color: #fff;
        text-align: center;
        background-color: #00adee;
        border-radius: 1px;
        font-size: 12px;
    }



    
    您還沒有登錄哦！

    立即登錄

我想讓左邊ico和文字，按鈕都對齊。

.pop-viphead-nologin-icon,.pop-viphead-nologin-txt,.pop-viphead-nologin-btn{
        vertical-align: middle;
    }

以上是“css中vertical-align屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！