Question

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

＆＃13;

<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>

＆＃13;

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;
}

Answer 2

您不需要使用太多 divs ，但如果您想使用div，则无需使用换行符。因为，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。这有助于加快页面加载速度。

如何在图标旁边对齐文字？

2 个答案: