亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

子元素隨著兄弟元素自適應垂直居中

子元素隨著兄弟元素自適應垂直居中

慕桂英546537 2018-07-22 08:06:12
父元素有兩個子元素,兩個子元素需要并排顯示,右側的子元素內容不固定,需要讓左側的元素隨右側子元素的變化而自適應垂直居中父元素     <!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">             我是一行文字需要自適應垂直居中        </div>         <div class="sample-2">             在移動端如果使用body滾動,意思就是頁面的高度由內容自動撐大,body自然形成滾動條,這時我們監聽window.onscroll,發現onscroll并沒有實時觸發,只在手指觸摸的屏幕上一直滑動時和滾動停止的那一刻才觸發,采用了wk內核的webview除外。        </div>     </div></body></html>
查看完整描述

2 回答

?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

.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;}


查看完整回答
反對 回復 2018-07-23
?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

#demo {        width: 410px;        border: 1px solid red;        display: flex;        align-items: center;
    }


查看完整回答
反對 回復 2018-07-23
  • rencoo
    rencoo
    是解決了垂直居中,但是好像又不水平居中了,都靠左分布了?
  • 2 回答
  • 0 關注
  • 437 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號