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

要获得底部的“特色”类，可以使用位置。

.featured {
   position: relative;
}

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

至于将箭头对齐到中心。这是通过将箭头定位在 50% 标记处来实现的，即一半。但是我们随后将 div 向上移动了一半的高度。我指定了 20px 的高度，并将 div 设置为向上移动 10px 并带有负的 margin-top。

.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 类使用绝对位置，如下所示，并在 .featured 类中使用除静态以外的任何位置：

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


}