CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Igor Schekotihin
Igor Schekotihin

Reputation: 177

Can't align image with div

I can't align image with a div.
I am using bootstrap, tried to create a row and add columns, but the image still slides lower than the edge of the div it is in.

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: [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 -->

I am trying to align my photo with the contacts block, so it is vertically centered.

How can I fix this?

Upvotes: 0

Views: 548

Answers (1)

Josh Coast
Josh Coast

Reputation: 660

It's your height on .contacts. The image and padding is larger than 400px tall, so it overflows the contacts container. You can either let the height of contacts expand to the height of the image, or set the height of the image to a max-height of 400.

Upvotes: 2

Related Questions