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.
Related videos on Youtube
Author by
iamcoder
Updated on June 04, 2022Comments
-
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 over 6 yearscan you explain why?
-
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