How to align an image at the bottom-center of the div

Question

I want to align an image to the bottom of a div and also want to center it horizontally.

This is what I wanted to accomplish (picture down below), but in my project there's a huge gap below the cow. The picture of the cow is sliced in half, so I want the bottom portion to stick to the bottom of the view port while being responsive.

HTML:

<div class="main">
    <div class="container">

        <div class="nav">
            <ul>
                <li><a href="index.html" >Work</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

        <div class="main_text">
            <h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1>
            <p>Invite me to Dribbble maybe? Thanks.</p>
        </div>

        <a href="mailto:[email protected]" class="button">Visit Profile</a>

        <div class="cow"></div>

    </div> <!-- end container -->
</div> <!-- end main -->

CSS:

.cow {
    height: 280px; /* Change this height to change the size of the cow */
    background: url(../images/cow.png) bottom center no-repeat;
    background-size: contain;
}

Answer 1

Use flexbox )

.cow {
  height: 400px;
  background: blue;
  display: flex;
  justify-content: center;
}

img {
  align-self: flex-end;
}

<div class="cow">
  <img src="http://placehold.it/350x150">
</div>

Answer 2

In order for .main to have a height of 100%, you need to make sure that there is a height value computed for the containing block.

One way of doing this is to assign height: 100% to both the html and the body tags.

A simple way to position the .cow block element at the bottom of .main is to use absolute positioning. First, set position: relative to .main to set the point of reference for positioning .cow.

Apply position: absolute to .cow and set the bottom offset bottom: 0 and this will align the bottom edge of .cow to the that of .main. Absolute positioning will give a shrink-to-fit width by default, so set left: 0 and right: 0 to give .cow the full width of .main. This also takes care of any extra width due to any padding or margins added to .container.

You may want to assign a minimum height for .main to allow for enough space for the text, button and image. If you shrink the page enough, the absolute positioned element could overlap your text.

html,
body {
  height: 100%;
  margin: 0;
}
.main {
  height: 100%;
  border: 1px dotted blue;
  position: relative;
  min-height: 500px;
}
.container {
  height: 100%;
  padding: 0 20px;
}
.main_text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main_text h1 {
  padding-top: 10%;
  margin-top: 0px;
  font-weight: 400;
  font-size: 45px;
  margin-bottom: 0px;
}
.main_text p {
  width: 70%;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 25px;
  margin-bottom: 50px;
}
.buttons {
  display: flex;
  justify-content: center;
}
.button {
  text-align: center;
  margin: 0px 30px;
  color: #000;
  text-decoration: none;
  border: 3px solid #000;
  border-radius: 50px;
  padding: 10px 80px;
  transition: 0.3s background;
  font-size: 15px;
}
.button:hover {
  color: #fff;
  background: #000;
  transition: 0.3s background;
}
.cow {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.cow img {
  align-self: flex-end;
}

<div class="main">
  <div class="container">

    <div class="main_text">
      <h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1>
      <p>Invite me to Dribbble maybe? Thanks.</p>
    </div>

    <div class="buttons">
      <a href="mailto:[email protected]" class="button">Visit Profile</a>
    </div>

    <div class="cow">
      <img src="http://placehold.it/300x150">
    </div>

  </div>
</div>

Note: Browser support for flex is still buggy in some browsers and not backwards compatible, see http://caniuse.com/#feat=flexbox. If all you need is horizontal centering if inline or inline-block elements, text-align: center is sufficient.