Question

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

这是前一位的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进行哪些修改，以便描述框（＆＃34; info＆＃34; class）与父div的底部对齐＆＃34;特色＆＃34;类？如果可能的话，我也希望箭头在中间对齐。我怎么能这样做？

提前致谢！

Answer 1

要获得底部的“精选”课程，您可以使用职位。

.featured {
   position: relative;
}

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

将箭头对准中心。这通过将箭头定位在50％标记（即一半）来起作用。但是我们然后将div移动了一半的高度。我指定了20px的高度，并将div设置为向上移动10px，负边距为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类使用position absolute，并使用static以外的任何位置。 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;


}

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

2 个答案: