无法将图像与div对齐

时间:2017-02-09 16:46:49

标签: html css twitter-bootstrap

我无法将图像与div对齐 我正在使用bootstrap,试图创建一行并添加列,但图像仍然低于它所在的div的边缘。

Codepen



    .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: s4ek1389@gmail.com</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 -->
&#13;
&#13;
&#13;

我正在尝试将我的照片与联系人块对齐,因此它是垂直居中的。

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:2)

这是你在.contacts上的高度。图像和填充大于400像素高,因此它会溢出触点容器。您可以让联系人的高度扩展到图像的高度,也可以将图像的高度设置为最大高度400.