[SOLVED]How to center 4 font awesome icons

HTML & CSS
1

Hello, I have this code. I am trying to center 4 Fontawesome icons so that they are on one strait horizontal line in the footer. So that the icons always stay’s centered regadless of what the window size of the browser is. As it is now the icons are centered on max screen size but when changing the browser window size (to smaller) then they are not centered. Any ideas. Thank you.

HTML:

  <div class="footer">
    <br>
    <div class="fa fa-mobile"></div>
   
    <div class="fa fa-phone"></div>
   
    <div class="fa fa-plus-square"></div>
   
    <div class="fa fa-envelope"></div>
   
    <div class="copy_text">Copyright © 1998-2014</div>
    </div>
    </div>

CSS:

div.footer
{
    width: 100%;
    height: 132px;
    background-color: #1F1F1F;
    text-align:center;
}

div.fa-mobile
{
     color: #444;
    font-size: 2.2em;
    background-color: #fff;
    border: 4px solid #E6E6FA;
    border-radius: 48px;
    height: 52px;
    line-height: 44px;
    width: 52px;
    text-align:center;
    float:left;
    margin-left: 43.5%;
   margin-right: auto;
}

div.fa-phone
{
    display: inline-block;
    color: #444;
    font-size: 2.2em;
    background-color: #fff;
    border: 4px solid #E6E6FA;
    border-radius: 48px;
    height: 52px;
    line-height: 44px;
    width: 52px;
    text-align:center;
    float:left;
    margin-left: auto;
    margin-right: auto;
}

div.fa-plus-square
{
    display: inline-block;
    color: #444;
    font-size: 2.2em;
    background-color: #fff;
    border: 4px solid #E6E6FA;
    border-radius: 48px;
    height: 52px;
    line-height: 44px;
    width: 52px;
    text-align:center;
    float:left;
    margin-left: auto;
    margin-right: auto;
}

div.fa-envelope
{
    color: #444;
    font-size: 2.2em;
    background-color: #fff;
    border: 4px solid #E6E6FA;
    border-radius: 48px;
    height: 52px;
    line-height: 44px;
    width: 52px;
    text-align:center;
    float:left;
   margin-left: auto;
   margin-right: auto;    
}

.copy_text
{
    font-family: PT Sans;
    font-size: 0.8em;
    font-style: italic;
    text-align: center;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    padding-top: 6em;
}
2

Hi,

Just use display:inline-block (not float).

You can also simplify that masses of code into about a tenth of the size. :smile:

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.footer {
    width: 100%;
    min-height: 132px;
    background-color: #1F1F1F;
    text-align:center;
}
.footer .fa {
    display:inline-block;
    vertical-align:middle;
    color: #444;
    font-size: 2.2em;
    background-color: #fff;
    border: 4px solid #E6E6FA;
    border-radius: 48px;
    height: 52px;
    line-height: 44px;
    width: 52px;
    margin:20px 5px;
}
.copy_text {
    font-family: PT Sans;
    font-size: 0.8em;
    font-style: italic;
    color: #fff;
}
</style>
</head>

<body>
<div class="footer">
        <div class="fa fa-mobile"></div>
        <div class="fa fa-phone"></div>
        <div class="fa fa-plus-square"></div>
        <div class="fa fa-envelope"></div>
        <div class="copy_text">Copyright © 1998-2014</div>
</div>
</body>
</html>
1 Like
3

Hello, This worked. Thank you for your help.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.