无法将图像与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对齐

回答

相关问题