鍍金池/ 問(wèn)答/HTML5  HTML/ 子元素隨著兄弟元素自適應(yīng)垂直居中

子元素隨著兄弟元素自適應(yīng)垂直居中

父元素有兩個(gè)子元素，兩個(gè)子元素需要并排顯示，右側(cè)的子元素內(nèi)容不固定，需要讓左側(cè)的元素隨右側(cè)子元素的變化而自適應(yīng)垂直居中父元素


    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #demo {
        width: 410px;
        border: 1px solid red;
    }

    .sample-1 {
        display: inline-block;
        width: 200px;
        border: 1px solid black;
    }

    .sample-2 {
        width: 200px;
        display: inline-block;
        border: 1px solid orange;
    }
    </style>
</head>

<body>
    <div id="demo">
        <div class="sample-1">
            我是一行文字需要自適應(yīng)垂直居中
        </div>
        <div class="sample-2">
            在移動(dòng)端如果使用body滾動(dòng)，意思就是頁(yè)面的高度由內(nèi)容自動(dòng)撐大，body自然形成滾動(dòng)條，這時(shí)我們監(jiān)聽window.onscroll，發(fā)現(xiàn)onscroll并沒(méi)有實(shí)時(shí)觸發(fā)，只在手指觸摸的屏幕上一直滑動(dòng)時(shí)和滾動(dòng)停止的那一刻才觸發(fā),采用了wk內(nèi)核的webview除外。
        </div>
    </div>
</body>

</html>
回答
編輯回答
夕顏

.sample-1 {

    display: inline-block;
    width: 200px;
    border: 1px solid black;
    vertical-align:middle;
}

.sample-2 {
    width: 200px;
    display: inline-block;
    border: 1px solid orange;
    vertical-align:middle;
}
2017年8月5日 15:04
編輯回答
誮惜顏
#demo {
        width: 410px;
        border: 1px solid red;
        display: flex;
        align-items: center;
    }
2018年8月15日 01:13