html - 如何对齐图标旁边的文本？

Question

我有一个联系我们的页面，其中有一张图片，后跟一个图标和一些文本。我想对齐图标旁边的文本。

<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">info@mentoria.com</span>
           </span>
       </div>
    </div>

Answer 1

试试这个

将类添加到您的 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;
}