我怎样才能使这个按钮和图标对齐？他们走了答案

【问题标题】：How can i make this button and Icon aligned? they are off我怎样才能使这个按钮和图标对齐？他们走了
【发布时间】：2015-12-12 05:04:12
【问题描述】：

这是我正在处理的部分的 HTML...

<div id="projects">
   <H1 class="projects">PROJECTS</H1>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <button class="leftbtn"></button>
   <button class="rightbtn"></button>
</div>

这里是css...

#projects {
    width: 1280px;
    height: 400px;
    background-color: #306e73;
    margin-top: 100px;
    clear: both;
    position: relative;
    text-align: center;
}

.projects {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 48px;
    color: #ffffff;
    float: center;
}

.box {
    width: 230px;
    height: 230px;
    background-color: #848181;
    display: inline-block;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 25px;
}

.leftbtn {
    position: relative;
    float: left;
    width: 60px;
    height: 60px;
    margin-left: 25px;
    margin-top: -150px;
    border-radius: 100px;
}

.leftbtn:before {
    content: "\f137";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #ff5335;
    font-size: 70px;
    position: relative;
    margin-left: -8px;
    }

    .rightbtn {
        position: relative;
        float: right;
        width: 60px;
        height: 60px;
        margin-right: 25px;
        margin-top: -150px;
        border-radius: 100px;
    }

    .rightbtn:before {
        content: "\f138";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: #ff5335;
        font-size: 70px;
        position: relative;
        margin-left: -8px;
    }

左右按钮未与图标对齐。我似乎无法弄清楚如何让它们对齐！哈，请帮助我不要发疯:)

【问题讨论】：

对齐（垂直或水平）是什么意思？
我刚刚修复了一点。所以现在我垂直猜测
这可能会对您有所帮助：stackoverflow.com/a/34235428/3597276 和 stackoverflow.com/a/33345537/3597276
jsfiddle.net/kyv263q9 解决您的问题，我修复了一个按钮，以同样的方式尝试另一个按钮。你的 css 有点乱，好像
成功了！谢谢！

标签： html css

【解决方案1】：

你可以通过position:absolute;实现你想要的情况

Jsfiddle

【讨论】：

【解决方案2】：

根据 OP 告诉尝试在 leftbtn 之前和 rightbtn 之前使用position:absolute

 .rightbtn:before {
    content: "\f138";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #ff5335;
    font-size: 70px;
    position: absolute;
    top: -13px;
    left: 1px;
}

这里是fiddle link

谢谢

【讨论】：