如何在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;


}