简体   繁体   中英

How can i make this button and Icon aligned? they are off

Here is the HTML for the section i am working on...

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

and here is the 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;
    }

The left and right button are not aligned with the icons. I cant seem to figure out how to get them to align! ha please help me from going crazy :)

You can achieve your desire situation by position:absolute;

Jsfiddle

As per the OP told try using position:absolute in the leftbtn before and rightbtn before

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

here is the fiddle link

Thanks

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM