How do I vertically align elements within a div in CSS?

Question

I have the following bit on my site...

This is the HTML output for the previous bit:

<div class="featured" style="background: url(http://localhost/basecommand/attachments/8d7fd632111cf768ec62d5ad084d8059.jpg);">

                    <h1>This Is a Test Article</h1>

                    <div class="arrow left">

                        <i class="fi-arrow-left"></i>

                    </div>

                    <div class="arrow right">

                        <i class="fi-arrow-right"></i>

                    </div>

                    <div class="clear"></div>

                    <div class="info">

                        <p>https://www.bungie.net/pubassets/1319/Destiny_31.png

Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex ...</p>

                        <h2><a href="http://localhost/basecommand/index.php/articles/This-Is-a-Test-Article/1">Read More</a></h2>

                    </div>

                </div>

This is the CSS I have so far

.featured {
    width: 620px;
    height: 349px;
    border: 1px solid #000;
    margin: 0px;
}

.featured h1 {
    font-size: 18px;
    color: #fff;
    background: rgba(183, 31, 47, 0.5);
    padding: 10px;
    margin: 15px 0px;
    width: 50%
}

.featured .arrow {
    font-size: 72px;
    font-weight: bold;
    padding: 10px;
    color: rgba(255, 255, 255, 0.25);
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.featured .info {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    bottom: 0;
    left: 0;
    position: relative;
    vertical-align: bottom;
}

.featured p {
    padding: 10px;
}

.featured a {
    color: #fff;
}

.featured h2 {
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    padding: 10px;
}

What modifications can I make to my css so that the description box("info" class) is aligned to the bottom of the parent div "featured" class? I would also like the arrows to be aligned in the middle, if possible. How can I do this?

Thanks in advance!

Answer 1

To get the "featured" class on the bottom, you can use position.

.featured {
   position: relative;
}

.featured .info {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
}

As for aligning the arrows to the center. This works by positioning the arrow at the 50% mark, which is half. But we then move the div up by half of the height. I specified the height of 20px, and set the div to move up 10px with the negative margin-top.

.arrow {
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
}

For more information about Vertical-Align, please look at these resources.

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

http://css-tricks.com/almanac/properties/v/vertical-align/

http://phrogz.net/CSS/vertical-align/

Answer 2

Please refer JSFiddle

Use position absolute as below for your .info class and use any position other then static in . featured class:

.featured .info {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.5);

    left: 0;
    position: absolute;
    bottom: 0;


}