Question

如何将文字水平和垂直居中于字体上方的真棒图标？

示例代码：

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

Answer 1

只需设置display：table-cell，vertical-align：middle和text-align：center to div

CSS

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

Answer 2

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 3

这是你想要实现的目标吗？

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

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

4 个答案: