無法將圖像與div對齊

我無法將圖像與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 300px高度，所以背景不會擴展到覆蓋內容的整個高度。 https://codepen.io/LordNeo/pen/ggBjja?editors=1100 – LordNeo

接觸塊100％寬，所以我無法將圖像放在旁邊。我希望它在中間（垂直）。 –

這是您在.contacts上的高度。圖像和填充大於400像素高，因此溢出聯繫人容器。您可以讓聯繫人的高度擴展到圖像的高度，或者將圖像的高度設置爲最大高度400.

來源

2017-02-09 16:54:29

如果你想使它與文本垂直對齊，你可以玩弄圖像的高度，它的容器填充直到它與文本垂直對齊，或者你可以進入https：// css的真棒世界-tricks.com/snippets/css/a-guide-to-flexbox/ –

無法將圖像與div對齊

回答

相關問題