CODEWITHSUNDEEP
cssalignmentfont-awesome
Edson Horacio Junior
Edson Horacio Junior

Reputation: 3143

Center text above font awesome icon?

How can I horizontally and vertically center text above font awesome icon?

Example code:

<div>
    <i class="icon-circle"></i>
    <span>text</span>
</div>

Upvotes: 5

Views: 7664

Answers (4)

Edson Horacio Junior
Edson Horacio Junior

Reputation: 3143

Using Bootstrap 2.3 I achieved it like this:

<span class="icon-stack" style="text-align:center;">
    <i class="icon-circle icon-2x"></i>
    <span class="icon-stack"><strong>Some text</strong></span>
</span>

Upvotes: 0

Assan Sanogo
Assan Sanogo

Reputation: 41

p {
  <!-- set the paragraph position as absolute -->
       vertical-align: bottom;
       display: inline-block;  
       position: absolute;
        }
   
i {
    <!-- set the image position relatively -->  
      vertical-align: top;
      margin-top: 6%;
      margin-left: 0.7%;
      position: relative;
        }
    <head>
       <!--let's assume u chose the fa-camera-retro icon-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">  
    </head>

    <body>
        <div id="icon_labeled">`
           <p>Truc</p>
           <i class="fa fa-camera-retro"></i>        
        </div>
    </body>

Upvotes: 2

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

Is this what you're trying to achieve?

HTML:

<div>
    <div class="content">
         <span>text</span>
         <i class="fa fa-camera-retro"></i>
    </div>
</div>

CSS:

div{
     width: 200px;
     height: 80px;
     background-color: #ddd;
     text-align: center;
     display: table;
}
div .content {
    display: table-cell;
    vertical-align: middle;
}
div .content span {
    display: block;
}

http://jsfiddle.net/63ovh9xk/

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Just set display:table-cell, vertical-align: middle and text-align: center to the div

CSS

div{
display: table-cell;
text-align:center;
vertical-align: middle;
}

Upvotes: 4

Related Questions