How to center <i> tag in a div

11,518

Solution 1

Set text-align:center; to the parent div #lock-cirle, like this

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    #lock-cirle {
        border: solid 2px #9f070a;
        border-radius: 100%;
        width: 100px;
        height: 100px;
        margin: 0px auto;
        margin-top: 5%;
        margin-bottom: 5%;
        text-align:center;
    }

    #lock-icon{
        font-size: 50px;
        color: #9f070a;
        margin: 27%;
    }
</style>

</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
    <div id="lock-cirle"  style="background-color: yellow;">
        <i class="fa fa-lock" id="lock-icon" style="background-color: green;"></i>
    </div>
</div>

</body>
</html>

Cuz <I> element is inline by default, and text-align CSS property describes how inline content is aligned

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Solution 2

#lock-icon{
       font-size: 50px;
       color: #9f070a;
       margin: 27%;
       text-align: center;
    }

Correct your #lock-icon CSS as above since you want to center fa in the div.

Share:
11,518

Related videos on Youtube

iamcoder
Author by

iamcoder

Updated on June 04, 2022

Comments

  • iamcoder
    iamcoder almost 2 years

    I would like to center an fa on a div using i tag but I'm kinda clueless on how to do that. Any help?

    I'm kinda new here.

    Thanks

    Sample html:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        #lock-cirle {
            border: solid 2px #9f070a;
            border-radius: 100%;
            width: 100px;
            height: 100px;
            margin: 0px auto;
            margin-top: 5%;
            margin-bottom: 5%;
        }
    
        #lock-icon{
            font-size: 50px;
            color: #9f070a;
            margin: 27%;
        }
    
    
    </style>
    
    </head>
    <body>
    <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
        <div id="lock-cirle"  style="background-color: yellow;">
            <i class="fa fa-lock" id="lock-icon" style="background-color: green;"></i>
        </div>
    </div>
    
    </body>
    </html>
    
  • iamcoder
    iamcoder over 6 years
    can you explain why?
  • Mo'men Mohamed
    Mo'men Mohamed over 6 years
    @iamcoder Cuz <I> element is inline by default, and text-align CSS property describes how inline content is aligned