Question

我想在我的div #first中将Font Awesome中的箭头向下图标居中。 name也是descr的中心，但当我想将arrow的内容居中时，它就无效了。

这是我的HTML：

<div id="first">
    <div class="name">My Name</div>
    <div class="descr">Web Dev</div>
    <div class="arrow">
        <a class="scrollTo" href="#second">
            <i class="fa fa-arrow-down fa-4x"></i>
        </a>
    </div>
</div>

这是我的CSS：

body
{
    margin:0;
    padding:0;
    background:#252932;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:400;
}

#first
{
    margin:0 90px 0 90px;
    height:100vh;
    background:#252932;
}

#first .name
{
    padding-top: 25vh;
    color:#fff;
    font-weight: bold;
    font-size:10vh;
    text-align: center;
}

#first .descr
{
    color:#195962;
    text-align: center;
    font-size: 4vh;
}

.arrow
{
    text-align:center;
}

.arrow i
{
    color:#fff;
    position:absolute;
    bottom:80px;
    transition:all 0.5s ease;
}

我想修复页面底部的箭头，这就是我使用position:absolute; bottom:80px的原因。但似乎这些属性打破了我的表现。

Answer 1

        *, *:before, *:after {
          box-sizing: border-box;
        }

        html{
            height:100%;
        }

        body
        {
            margin:0;
            padding:0;
            background:#252932;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight:400;
        }

        #first
        {
            margin:0 90px 0 90px;
            min-height:100%;
            background:#252932;
            display:relative;
        }

        #first .name
        {
            padding-top: 25vh;
            color:#fff;
            font-weight: bold;
            font-size:10vh;
            text-align: center;
        }

        #first .descr
        {
            color:#195962;
            text-align: center;
            font-size: 4vh;
        }

        .arrow
        {

            background-color:blue;
            position: absolute;
            bottom:80px;
            left: 50%;
            display: block;
            width: 80px;
            height: 80px;
            margin-left: -40px;
            text-align: center;
            cursor: pointer;
        }

        .arrow a{
            display:block;
        }

        .arrow i
        {
            color:#fff;
            background-color:red;
            transition:all 0.5s ease;
            line-height:80px;
            text-align:center;

        }

text-align：center不是我的Font Awesome图标的完美中心

1 个答案: