CODEWITHSUNDEEP
htmlcssvertical-alignment
Ivan Buljovčić
Ivan Buljovčić

Reputation: 25

Bottom vertical align div in parent

Im having an issue with vertical aligning a button inside of its parent. The button should be aligned to the bottom of the "info" div but I cannot get it to stick.

I cannot use "position: absolute" in this situation.

And i do not know the height of the main parent div beforehand.

HTML:

<div class="container">
  <a href="#"><img src="http://placekitten.com/g/200/400" alt="" /></a>
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem tenetur temporibus voluptas repellendus.</p>
    <button>Button</button>
  </div>
</div>

CSS: 

* { box-sizing: border-box; }

.container {
  width: 200px;
  height: 700px; /* The height is variable!!! */
  background: #ccc;
  padding: 1em;
  overflow: hidden;
}

a { display: block; height: 50%; }
a img { display: block; width: 100%; max-width: 100%; }

.info {
  background: #fa0;
  display: block;
  height: calc(50% - 1em);
  margin-top: 1em;
  text-align: center;
}

.info p {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: #a0f;
  margin: 0;
}

.info button {
  display: inline-block;
  vertical-align: bottom;
}

Upvotes: 0

Views: 1600

Answers (1)

jmknoll
jmknoll

Reputation: 1044

As mentioned in some of the comments, position: absolute is the easiest way to do this. However, you said you're restricted on this factor, so here's an alternative using flexbox!

You need to see three properties on the parent element: display, flex-direction, and justify-content. Then put a margin on the child element to make sure its centered at the bottom. Here's an updated fiddle. No absolute position required : ) https://jsfiddle.net/jg8egtb1/

.info {
  background: #fa0;
  display: block;
  height: calc(50% - 1em);
  margin-top: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info button {
  margin: 0 auto;
}

Upvotes: 5

Related Questions