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

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

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