4

This is my code i need to center the icon with inline css:

<div class="small-4 medium-4 large-4 columns">
    <i class="fa fa-check-square-o fa-lg"></i>
</div>
Simon Hänisch
  • 4,740
  • 2
  • 30
  • 42
Tate
  • 41
  • 1
  • 1
  • 2

3 Answers3

7

If you are using bootstrap you should only add text-center class

<div class="small-4 medium-4 large-4 columns text-center">
    <i class="fa fa-check-square-o fa-lg"></i>
</div>

Else you can add this inline css to your parent div

text-align: center

So it will be :

<div style="text-align: center" class="small-4 medium-4 large-4 columns">
    <i  class="fa fa-check-square-o fa-lg"></i>
</div>
Majid Nayyeri
  • 245
  • 2
  • 11
  • Thany you very much ^^ – Tate Apr 04 '17 at 10:18
  • @Tate If my answer was useful, you can press ✔ – Majid Nayyeri Apr 04 '17 at 10:22
  • It looks like font awesome icons are treated as text. However, this only solves the horizontally alignment. For the vertical alignment which sometimes doesn't work if the line height is not same as the parent box height, these two are helpful, https://stackoverflow.com/questions/17309928/how-to-center-text-vertically-with-a-large-font-awesome-icon, https://stackoverflow.com/questions/19124255/center-icon-in-a-div-horizontally-and-vertically – F.G Jul 06 '21 at 00:38
1

Give the width to the container div of icon and give text-align:center to that div

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
   <div style="width:100%;text-align:center" class="small-4 medium-4 large-4 columns">
          <i class="fa fa-check-square-o fa-lg"></i>
        </div><body>
  
  </body>
  </html>
You can also add text-center class to container div
Sanket Shinde
  • 134
  • 8
0

Add the following style,

 .columns {
  text-align: center;
   }
Elizabeth Mathew
  • 418
  • 3
  • 11