如何使文字與圖標垂直對齊

Question

我添加了一個帶有p標簽的超棒圖標，並且該圖標下方顯示了文本，如何解決此問題，使文本能夠真實對齊。

    <p><i class="fas fa-map-marker-alt"></i>21a George Street<br> Croydon CR0 1LA</p>

`.fas {
    font-size: 30px;
    color: #C1761B;
    margin-right: 10px;
    margin-top: 5px;
}`

非常感謝

Answer 1

由於字體圖標的工作方式與字體一樣，因此通常只與第一行對齊！

解決方案可能是將所有內容嵌套在div中，然后使用display:inline-block段落中的一個，如下所示：

 .fas { font-size: 30px; color: #C1761B; margin-right: 10px; margin-top: 5px; } p { display:inline-block; } 

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div> <i class="fas fa-map-marker"></i> <p>21a George Street<br> Croydon CR0 1LA</p> </div> 

Answer 2

可能希望將i與文本內部分開，以便我們可以同時控制兩者。

在div上設置樣式只是為了說明和視覺效果。

 div { border: 1px solid; display: inline-block; padding: 10px; margin: 10px; } .fa { font-size: 30px; color: #C1761B; display: inline-block; border: 1px solid; vertical-align: middle; } p { border: 1px solid; vertical-align: middle; display: inline-block; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div> <i class="fa fa-map-marker"></i> <p>21a George Street <br>Croydon CR0 1LA</p> </div>