我如何垂直对齐在CSS中一个div中的元素？ [英] How do I vertically align elements within a div in CSS?

问题描述

我在我的网站上的以下位...

I have the following bit on my site...

这是为previous位HTML输出：

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>

这是CSS我到目前为止

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

我可以对我的CSS哪些修改，从而描述框（信息类）对齐父DIV精选级的底部？我还想箭头中间对齐，如果可能的话。我怎样才能做到这一点？

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?

在此先感谢！

推荐答案

要拿到底部的特色类，你可以使用位置。

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

至于对准箭头的中心。这通过定位箭头50％大关，这是成功的一半。但是，我们然后将分区由高度的一半。我指定的20像素高度，并设置DIV为10px移动与负的margin-top。

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-美国/文档/网页/ CSS /垂直对齐

http://css-tricks.com/almanac/properties/v /垂直对齐/

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

这篇关于我如何垂直对齐在CSS中一个div中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！