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

问题描述

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

这是上一位的HTML输出：

 < div class = featuredstyle =background：url（http：//localhost/basecommand/attachments/8d7fd632111cf768ec62d5ad084d8059.jpg）;> 
 
< h1>这是测试文章< / 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威尼斯解释。海脚趾前膛，自由fastidii ea二重奏。 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>阅读更多< / 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做什么修改， class）对齐到父div的特征类的底部？我也希望箭头在中间对齐，如果可能的话。

解决方案

要获得底部的特色类，您可以使用position。

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

至于将箭头对准中心。这通过将箭头定位在50％标记处，其为一半来工作。但是，我们然后将div移动了一半的高度。我指定了20像素的高度，并设置div向上移动10像素与负边距顶部。

  .arrow {
 position：absolute; 
 top：50％; 
 height：20px; 
 margin-top：-10px; 
} 
  

有关Vertical-Align的详细信息，请参阅这些资源。 p>

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 /

I have the following bit on my site...

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>

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

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?

Thanks in advance!

解决方案

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

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-US/docs/Web/CSS/vertical-align

http://css-tricks.com/almanac/properties/v/vertical-align/

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

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