在字體圖標后垂直對齊文本

Question

<div class="col-md-4">
    <span class="fa-stack fa-2x">
        <i class="fa fa-circle fa-stack-2x blue"></i>
        <i class="fa fa-wifi fa-stack-1x white"></i>
    </span>
    <h4 class="blue">Free wifi</h4>
</div>

如何在圖標右側顯示h4元素並垂直對齊？ 我應該離開span嗎？

Answer 1

一種方法是使用inline-block顯示並中間對齊 - 請參見下面的演示：

 .wrapper > * { display: inline-block; vertical-align: middle; } .blue { color: blue; } .white { color: white; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="col-md-4 wrapper"> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x blue"></i> <i class="fa fa-wifi fa-stack-1x white"></i> </span> <h4 class="blue">Free wifi</h4> </div>

Answer 2

使用CSS 彈性盒。 創建一個父<div>將圖標和文本包裝到其中（在我的例子中是它的icon-holder ），並使用display: flex使其成為一個 flexbox 容器。

看看下面的片段：

 .icon-holder { display: flex; /* Flex Container */ align-items: center; /* Vertically Align Content */ } .blue { color: #33b5e5; } span { color: #fff; } h4 { padding-left: 5px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="col-md-4"> <div class="icon-holder"> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x blue"></i> <i class="fa fa-wifi fa-stack-1x white"></i> </span> <h4 class="blue">Free wifi</h4> </div> </div>

希望這可以幫助！

Answer 3

您可以使用display: flex並且可以執行以下操作：

•  .col-md-4 { display: flex; align-items: center; } .blue { color: blue } .white { color: white; }

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-4 wrapper"> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x blue"></i> <i class="fa fa-wifi fa-stack-1x white"></i> </span> <h4 class="blue">Free wifi</h4> </div>