web-dev-qa-db-ja.com

div内の2つ以上の（並べて）要素を垂直方向に整列させる方法は？

Div内の高さが異なる2つの要素を垂直方向に整列させようとしています。

<div class="footer-icons">
    <div id="footer-Twitter">
         <img src="images/Twitter.png" width="40" alt="">    
    </div>
    <div id="footer-fb">
         <div class="fb-like" data-href="http://facebook.com/user" data-send="false" data-layout="button_count" data-width="160" data-show-faces="false" data-font="arial"></div>
    </div>
</div>

Twitter divの高さは40px、fbdivの高さは20pxです。現在起こっているのは、fbdivがTwitter画像の下端の垂直方向の中央に配置されていることです。 CSSは次のとおりです。

.footer-icons {
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align:center;
    vertical-align:middle;
}

#footer-Twitter {
    display:inline-block;
}

#footer-fb {
    display:inline-block;
}

私は何が間違っているのですか？

csshtmlvertical-alignment
13
tariq

内側のdivに垂直方向の配置を配置します

#footer-Twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}
25
Forty-Two

簡単な答え：

????

長い答え：

display: flexは、toolbeltに含めると非常に便利なツールです。 ここ は、使い始めるのに役立つドキュメントです。

特にあなたの場合、これらのプロパティは役に立ちます：

align-items:center-すべての子要素の中心を垂直方向に揃えます

justify-content:center-これにより、親コンテナ内の子要素が水平方向に中央揃えになります（これが必要かどうかはわかりませんが、役立つ場合もあります）

.footer-icons {
    border: 1px solid #000;
    padding-top:40px;
    width:300px;
    margin: auto;
    
    display:flex;
    align-items:center;
    justify-content:center;
}
<div class="footer-icons">
    <div id="footer-Twitter">
        Center me  
    </div>
    <div id="footer-fb">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png" width="40" alt="">   
    </div>
</div>
5
Cumulo Nimbus

display: flex; align-items: center;に.footer-iconsを追加するだけです[〜＃〜] css [〜＃〜]で問題が解決します。ありがとう

.footer-icons {
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align:center;
    vertical-align:middle;
    display: flex;
    align-items: center;
}
1
Hassan Siddiqui

line-height大きいアイコン以上：

.footer-icons {
    ...
    line-height: 32px;
}
1
Ricardo Souza