Question

我希望将字体图标置于div的底部。我知道我可以把它放在背景的绝对位置并使用底部：0但我无法获得边距：自动将它放在任何一侧。

这是我的代码：

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

这是你在找什么？

Div的中心和底部

1 个答案: