I have an image inside a div, and what I want to do is display it at the bottom and centered. Now it is displayed followed by the content that the div has. I have managed to do both, but separately, that is, when I try to do both, it does not work.
.story-box {
background-color:#8bc34a;
padding:0;
height:300px;
width:320px;
}
.swipe-up {
height:70px;
bottom:10px;
display:block;
margin:auto;
}
<div class="card-body story-box" id="story">
<img class="swipe-up" src="//via.placeholder.com/100x70" />
</div>
=============
| |
| DIV |
| |
| [IMG] |
=============
One of the many options to solve it is to make the container behave like a table cell and vertically align its content below (bottom), although this is not entirely "natural" since we are not in a design that tries to emulate an entire table :
My favorite solution is with Flexbox , making the container of this type and assigning the corresponding alignment to the cross axis ( property
align-items
), in this case the vertical one. Finally, you can also handle horizontal alignment with flexbox, with the propertyjustify-content
on the container:I recommend you to use flexbox.
Within the included Code, the important thing is the first 4 lines of the .story-box class
In a few words, you define the Parent container as type flex and you indicate that all its children will use a column type address, and in this way so that the content appears at the bottom you use justify-content (this because it is a column), and to center the content you use align-items
I recommend this very well explained flexbox guide .