如何在CSS中的div中垂直对齐元素？

Question

我的网站上有以下内容...

这是上一位的HTML输出：

<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>

这是我到目前为止的CSS

.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;
}

我可以对CSS进行哪些修改，以使描述框（“ info”类）与父div“ featured”类的底部对齐？ 如果可能的话，我也希望箭头在中间对齐。 我怎样才能做到这一点？

提前致谢！

Answer 1

要使“特色”类位于底部，您可以使用position。

.featured {
   position: relative;
}

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

至于将箭头对准中心。 通过将箭头定位在一半的50％标记处可以起作用。 但是，然后将div向上移动一半的高度。 我指定了20px的高度，并将div设置为以负的margin-top向上移动10px。

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

有关Vertical-Align的更多信息，请查看这些资源。

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

请参考JSFiddle

对.info类使用以下绝对位置，并在中使用除static以外的任何位置。 特色班：

.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;


}