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:hi@gauthamsk.com" 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;
}

Possible duplicate of [How to align content of a div to the bottom with css?](http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css) — Sina, Dec 14 '15 at 11:14

score 10 · Answer 1 · answered Dec 14 '15 at 11:03

10

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>

answered Dec 14 '15 at 11:03

Narek-T

1,873
7
18

The best way as of now. I should really get more into flexbox. – Daan Dec 14 '15 at 11:10
I updated the question with some more code. With flexbox I've centered it and bottom aligned it to the div. But here the .div isn't taking up the height of the `main` div which leaves a gap on the bottom of the img/div. – Gautham SK Dec 14 '15 at 11:43
Your markup is really bad.. Why do you create `flex` where they are not needed? Okay, it's your choice, but what you don't use `background-image` instead of `` ? In this situation it is a good solution. – Narek-T Dec 14 '15 at 12:00
Sorry about the bad markup, I was in a hurry. I have updated the code and re-framed the question in case my question wasn't clear enough. – Gautham SK Dec 15 '15 at 13:27

Marc Audet · Accepted Answer · 2015-12-14T16:22:25.723

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:hi@gauthamsk.com" 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.

The `.cow` div. I forgot to mention that there is a container inside the maiin div. — Gautham SK, Dec 14 '15 at 12:46
I added the `.container` div, but it does not seem to trigger any scrolling, so something else is going that is not in my snippet. — Marc Audet, Dec 14 '15 at 12:48
Your `.container` block as left/right padding (20px) and that was causing the scrolling. I fixed the issue by using left/right offsets to compute the width of `.main` instead of width of 100%. All should work now. — Marc Audet, Dec 14 '15 at 16:22

score 1 · Answer 3 · answered Dec 14 '15 at 11:07

1

Try this:

.centerBottom{
  position:fixed;
    bottom:0px;
    left:50%;
}

http://plnkr.co/edit/HAtpO8aR3njgN73hCAA4?p=preview

answered Dec 14 '15 at 11:07

younes sofiane

401
8
21

I've edited the question. I've successfully positioned it in the div. But how do I position the div to the bottom? – Gautham SK Dec 14 '15 at 11:51
The image isn't horizontally centered in the bottom. – Gautham SK Dec 15 '15 at 13:18
@GauthamSK I was just showing you the bottom position, since that's the problem remaining – younes sofiane Dec 15 '15 at 13:35

score 0 · Answer 4 · answered Dec 14 '15 at 11:17

0

Try this solution: https://jsfiddle.net/adwc4gwt/

    .cow{
  position:fixed;
  bottom:0px;
  background-color:red;
  width:100%;
}
img{
text-align:center;
display:block;
}

answered Dec 14 '15 at 11:17

NormundsP

425
2
6
13

score 0 · Answer 5 · answered Dec 14 '15 at 11:23

we can use css3 transform property as we can use negative percentage property to align the image at bottom.

.centerBottom{
  position:fixed;
    bottom:0px;
    left:50%;
    -ms-transform:translate(-50%,0%);
    -moz-transform:translate(-50%,0%);
    -o-transform:translate(-50%,0%);
    -webkit-transform:translate(-50%,0%);
    transform:translate(-50%,0%);
}

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

Is this supported in all browsers? – Gautham SK Dec 14 '15 at 13:43 — Gautham SK, Dec 14 '15 at 13:43

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

5 Answers5