divと画像を整列できません

画像をdivに整列できません。
Iブートストラップを使用していますが、行を作成して、列を追加しようとしたが、画像はまだそれがであるDIVのエッジより低い摺動。divと画像を整列できません

.contacts { 
 
     height:300px; 
 
     background-color: #5E7BA7; 
 
     text-align:center; 
 
     padding-top:10px; 
 
     color:white; 
 
     font-size:18px; 
 
    } 
 
    
 
    #ava { 
 
     border-radius:100%; 
 
     
 
    }

<div class="contacts" id="contacts"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 

 
     <div class="col-xs-8"> 
 
     <h2>Contact me</h1> 
 
     <p>Get in touch with me and we will build something great.</p> 
 
     <p>E-mail: [email protected]</p> 
 
     <a href="https://vk.com/s4ekotihin"class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a> 
 
     <a href="https://www.facebook.com/profile.php?id=100004760679976" class="btn btn-social-icon btn-facebook"> 
 
      <i class="fa fa-facebook"></i></a> 
 
     </div> <!-- col-xs-8--> 
 
     <div class="col-xs-4"> 
 
     <img src="https://pp.vk.me/c636425/v636425401/55c29/w3KT6I3_x_0.jpg" class="img-responsive center-block" id="ava"> 
 
     </div> 
 
    </div> <!-- .row --> 
 
    </div> <!-- .container-fluid --> 
 
</div> <!-- .contacts -->

写真をコンタクトブロックと揃えようとしているので、垂直にセンタリングされています。

どうすればこの問題を解決できますか？

出典

2017-02-09 Igor Schekotihin

申し訳ありません写真を連絡先ブロックに揃えたい場合は、写真をコンタクトブロックの真ん中（縦）にしたい、または横にしたいと思うことを意味しますか？ –

それは整列の問題ではなく、.contactsを300ピクセルの高さにしたので、背景がコンテンツの全高をカバーするようには拡張されません。 https://codepen.io/LordNeo/pen/ggBjja?editors=1100 – LordNeo

コンタクトブロックの幅は100％なので、イメージを横に置くことはできません。私はそれを真ん中（垂直）にしたい。 –

あなたの身長は.contactsです。画像と詰め物の高さが400pxよりも大きいため、連絡先コンテナがオーバーフローします。連絡先の高さを画像の高さに合わせるか、画像の高さを最大高さ400に設定することができます。

出典

2017-02-09 16:54:29

テキストに垂直に整列させたい場合は、画像の高さで遊んでも構いませんし、視覚的にテキストと視覚的に整列するまで、コンテナのパディングを行うか、https：// cssのすばらしい世界に入り込むことができます-tricks.com/snippets/css/a-guide-to-flexbox/ –

divと画像を整列できません

答えて

関連する問題