vertical-align對齊規則

時間 2019-11-13

標籤 vertical align 對齊規則简体版

原文原文鏈接

起做用的前提條件

只能應用於內聯元素以及 display 值爲 table-cell 的元素。
vertical-align 屬性只能做用在 display 計算值爲 inline、inline- block，inline-table 或 table-cell 的元素上。所以，默認狀況下，span、strong、 em等內聯元素，img、button、input等替換元素，非 HTML 規範的自定義標籤元素，以及<td>單元格，都是支持 vertical-align 屬性的，其餘塊級元素則不支持。
浮動和絕對定位會讓元素塊狀化，從而讓內聯元素的vertical-align不生效

百分比

vertical-align 的百分比值是相對於 line-height 計算的
且是以line-height的基線爲基礎，vertical-align:0%和vertical-align：baseline效果同樣

vertical-align：inline-block和baseline

vertical-align 屬性的默認值 baseline 在文本之類的內聯元素那裏就是字符 x 的下邊緣，對於替換元素則是替換元素的下邊緣。可是，若是是 inline-block 元素則規則要複雜了：一個 inline-block 元素，若是裏面就是沒有圖文內容，或者 overflow 不是 visible，則該元素的基線就是其 margin 底邊緣；不然其基線就是元素裏面最後一行內的圖文的基線。見demo ：inline-block元素的vertical-align.html

vertical-align:middle實現垂直居中

內聯元素：元素的垂直中心點和行框盒子基線往上 1/2 x-height 處對齊。vertical-align:middle 定義是元素的中線和字符 x 中心點對齊html
table-cell 元素：單元格填充盒子相對於外面的表格行居中對齊。table-cell 元素設置 vertical-align 垂直對齊的是子元素，可是其做用的並非子元素，而是 table-cell 元素自身。就算 table-cell 元素的子元素是一個塊級元素，也同樣可讓其有各種垂直對齊表現。app
middle 將元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊這裏元素盒子的垂直中點容易肯定，父盒子的baseline也好肯定，可是x-height要進行計算獲得，這個x-height就是字母x的高度。ui
baseline肯定的規則一、inline-table元素的baseline是它的table第一行的baseline。spa

二、父元素【line box】的baseline是最後一個inline box 的baseline。code

三、inline-block元素的baseline肯定規則htm

規則1：inline-block元素，若是內部有line box，則inline-block元素的baseline就是最後一個做爲內容存在的元素[inline box]的baseline，而這個元素的baseline的肯定就要根據它自身來定了。規則2：inline-block元素，若是其內部沒有line box或它的overflow屬性不是visible，那麼baseline將是這個inline-block元素的底margin邊界。blog

詳情見博客：https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .ctn-block{
        display: block;
        background-color: #bbb;
        line-height: 200px;
        font-size: 50px;
    }
    .ctn-block .child1{
        display: inline-block;
        width: 100px;
        height: 100px;
        margin:10px 0;
        vertical-align: baseline; /*將子元素盒子的baseline與父盒子的baseline對齊
        vertical-align: middle;/*將子元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊*/

        /***注意：當vertical-align設置爲top和bottom時，其就不是按照baseline進行定位了，而是根據line box進行定位。子元素盒子的頂部和底部也就是其上下margin外邊界。**/
        /*vertical-align: top;/*將子元素盒子的頂部和其所在的line box頂部對齊*/
        /*vertical-align: bottom;/*將子元素盒子的底部和其所在的line box底部對齊*/
        background-color: aliceblue;
    }
    /*
    父元素.ctn-block的base-line是Gg的baseline，
    inline-block元素由於沒有內部line box，也沒有設置overflow:visible，因此其baseline是底margin邊界。
    */
    .wrapper{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        line-height: 150px; /*line box就是行高所造成的那個高度*/
    }
    .son{
        /***注意：當vertical-align設置爲top和bottom時，其就不是按照baseline進行定位了，而是根據line box進行定位。子元素盒子的頂部和底部也就是其上下margin外邊界。**/
        /*vertical-align: top;/*將子元素盒子的頂部和其所在的line box頂部對齊*/
        /*vertical-align: bottom;/*將子元素盒子的底部和其所在的line box底部對齊*/
        vertical-align: bottom;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: black;
    }
    </style>
</head>
<body>
    <div class="ctn-block">
        <div class="child1"></div>
        <span>Gg</span>
    </div>
    <div class="wrapper">
        <span class="son"></span>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。