css - Div 的中心和底部

Question

我希望将我的字体图标置于 div 底部的中央。我知道我可以将它绝对定位到背景并使用 bottom:0 但我无法让 margin:auto 将它的两侧居中。

这是我的代码:

    <section> 
       <p><i class="fa fa fa-arrow-circle-o-down"></i></p>
</section>

section {
background: url("../img/background.jpg") no-repeat center center fixed;
background-size: 100%;
background-color: black;
height: 100%;
position: relative;
}


section p i {
    position: absolute;
    color: white;
    font-size: 15em;
    bottom:0
}

Answer 1

您的图标是文本，因此您可以使用属性 text-align: center;。

A jsfiddle sample .我对代码做了一些修改。

html

<section> 
   <p><i>☺</i></p>
</section>

CSS

section {
    background: black url("http://placehold.it/420x150") no-repeat center center; // you can put the background-color here by the way
    background-size: 100%;
    height: 150px;
    width: 100%;
    position: relative;
    text-align: center; // magic stuff here !
}

section p i {
    position: absolute;
    color: red;
    font-size: 2em;
    bottom: 0; // you forget a ';' here
}

这是您要找的吗？