如何在圖標旁邊對齊文本？

我有一個聯繫我們頁面，其中我有一張圖片後面跟着一個圖標和一些文字。我想調整圖標旁邊的文字。如何在圖標旁邊對齊文本？

<div class="col-lg-7 col-md-7 col-xs-7" style="text-align: center;"> 
 
     <img src='../assets/img/Website-Png/map2.jpg' > 
 
     <br><br><br> 
 
     <div> 
 

 
      <i class="fa fa-map-marker" id="contact_icon1" aria-hidden="true"></i> 
 
      <span class="contact_font1">505-506, Kshitij Building, Veera Desai Rd, <br> Andheri West, Mumbai 40 0053</span> 
 

 
     </div><br> 
 
     <div> 
 
      <span> 
 
       <i class="fa fa-phone" id="contact_icon2" aria-hidden="true"></i> 
 
      </span> 
 
      <span class="contact_font2">+91 22 6470 1000</span> 
 
     </div><br> 
 
     <div> 
 
      <span> 
 
       <i class="fa fa-envelope-o" id="contact_icon3" aria-hidden="true"></i> 
 
       <span class="contact_font3">[email protected]</span> 
 
      </span> 
 
     </div> 
 
    </div>

來源

2017-02-09 Utkarsh Gautam

圖標已經在文本旁邊。你可以在這裏看到：https：//jsfiddle.net/h3agfd6c/ –

試試這個

添加類到您的div：

<div class="icon-text-group"> 
     <i class="fa fa-map-marker" id="contact_icon1" aria-hidden="true"></i> 
     <span class="contact_font1">505-506, Kshitij Building, Veera Desai Rd, <br> Andheri West, Mumbai 40 0053</span> 
</div>

然後將該類添加CSS：

.icon-text-group i, .icon-text-group span { 
    display: inline; 
}

來源

2017-02-09 07:12:46

你不需要使用太多的divs，儘管如果你想使用div，不需要使用換行符。 As，div是塊級元素，它會自動在下一行開始。您可以改用<p></p>。

也

你可以寫文字後立即<i></i>

例如，

<p> 
     <i class="fa fa-map-marker"></i> 243 Elm Street,Claremont,NH 03743 
     <i class="fa fa-phone"></i> <a href="#">603-542-7771</a> 
    </p>

可以在錨標記添加聯繫人號碼，如果需要，你可以添加類的錨標記。

總是嘗試儘可能減少div的代碼。這將有助於更快地加載您的頁面。

來源

2017-02-09 07:22:50 Shweta

如何在圖標旁邊對齊文本？

回答

相關問題