发表新帖
发表新帖

Center text above font awesome icon?

前端 未结
关注
4 1214
别那么骄傲
别那么骄傲 2021-01-19 17:33

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

Example code:


    
           


        

                      

              相关标签:
4条回答
  • 长发绾君心
    2021-01-19 17:59 

    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>

    0 讨论(0)
  • 臣服心动
    2021-01-19 18:02

    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: #ffffd;
     text-align: center;
     display: table;
}
div .content {
    display: table-cell;
    vertical-align: middle;
}
div .content span {
    display: block;
}

    http://jsfiddle.net/63ovh9xk/

    0 讨论(0)
  • 情歌与酒
    2021-01-19 18:05

    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>
    0 讨论(0)
  • 离开以前
    2021-01-19 18:20

    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;
}
    0 讨论(0)
 看不清?
提交回复
热议问题