Question

以下是我正在处理的部分的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;
    }

左右按钮未与图标对齐。我似乎无法弄清楚如何使它们对齐！哈，请帮助我发疯：）

Answer 1

您可以通过position:absolute;

实现您的愿望

Jsfiddle

Answer 2

根据OP告诉尝试使用之前和之前的leftbtn中的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

由于

如何使此按钮和图标对齐？他们走了

2 个答案: