字体真棒图标上方的中心文本？

Question

如何在 font awesome 图标上方水平和垂直居中文本？

示例代码：

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

Answer 1

只需将 display:table-cell、vertical-align: middle 和 text-align: center 设置为 div

CSS

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

Answer 2

这是您要实现的目标吗？

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/

Answer 3

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>

Answer 4

使用Bootstrap 2.3 我是这样实现的：

<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>

字体真棒图标上方的中心文本？

Center text above font awesome icon?

css

alignment

font-awesome