How to Position an Image at The Bottom of Div

How do I position an image at the bottom of div?

Add relative positioning to the wrapping div tag, then absolutely position the image within it like this:

CSS:

.div-wrapper {
    position: relative;
    height: 300px;
    width: 300px;
}

.div-wrapper img {
    position: absolute;
    left: 0;
    bottom: 0;
}

HTML:

<div class="div-wrapper">
    <img src="blah.png"/>
</div>

Now the image sits at the bottom of the div.

How to align an image to the bottom of the div?

If I understand you correctly, something like this should do the trick:

.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  bottom: 0;
}

You could add those classes to the DIV and the IMG respectively.

It looks like the parent div will be 300px high anyway because of the height set on the child in the adjacent div. If you specify the height of the parent instead, then you can absolutely position the child relative to the size of the parent.

If you don't set the parent as position:relative, then the child will be position relative to something else (like the page).

Vertical-align won't work because the IMG is an inline element, and the behavior you're expecting is table-cell dependent. With inline elements, vertical alignment is relative to the line and not to the parent container, so that an image aligned with text would sit in various positions relative to a given line of text.

Be sure to check the documentation for this and other questions, which is well-explained at MDN.

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

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>

HTML image bottom alignment inside DIV container

This is your code: http://jsfiddle.net/WSFnX/

Using display: table-cell is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?

To fix the space at the bottom, add vertical-align: bottom to the actual imgs:

http://jsfiddle.net/WSFnX/1/

Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?

So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/

Align an image center, bottom of a responsive div

You can use positioning to place the image at the bottom of the div and then use CSS transforms to center it.

.wrap {    height: 400px;    position: relative;    background: #f09d09;}
.wrap img{    display: block;    max-width: 100%;    position: absolute;    bottom:0;    left:50%;    transform:translateX(-50%);    }

<div class="wrap">    <img src="http://lorempixel.com/400/200/" alt="Sample Image"/></div>

How do I position an image at the bottom center inside a div?

short answer:
Try adding these 2 lines of CSS to your <img> child

left: 50%;
transform: translateX(-50%);

explanation:

using left the image moves to the center
but the center point will match the left side,

so using translate we divide the image in half
and it is moved so that it is perfectly centered!

code example:

.phone {
  position: absolute;
  bottom: 0;
  /* the solution */
  left: 50%;
  transform: translateX(-50%);
}

.bg {
  /* change this link to yout background image (not the phone) */
  background-image: url("https://i.stack.imgur.com/Sy91H.jpg");
  /* this make the background -> responsive */
  background-size: cover;
  /* take 100% of the space */
  /* (if you need less than 100% don't change this, instead change the parent height) */
  height: 100%;
  /* this line is important, and is needed for making the position work in image or childrens */
  position: relative;
}

* {
  /* this solve the scroll problem */
  box-sizing: border-box;
}

html,
body {
  /* this solve the little margin on body tag (chrome) */
  margin: 0;
  /* html take the 100% of height */
  height: 100%;
}

<!--background-->
<section class="bg">
  <!-- phone -->
  <img class="phone" src="https://i.stack.imgur.com/cfq59.png" />
</section>

---

Related Topics