小编cee*_*jay的帖子

如何将图标和文本居中对齐?

如何垂直堆叠图标并将其与其各自的文本对齐,以及如何将它们水平居中对齐?并使其全部适应移动设备?

在此输入图像描述

我的尝试

li {
  margin: 0 90px;
  display: inline;
}

.num {
  margin: 0 150px;
  display: inline;
}

ul {
  list-style: none outside none;
  margin: 0;
  padding: 50;
  text-align: center;
}

ul li i {
  text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
<!-- script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<ul>
  <li><i class="fas fa-phone">     
    </i>
  </li>
  <li><i class="fas fa-map">          
    </i>
  </li>
  <li><i class="fas fa-paper-plane">
    </i>
  </li>
</ul>
<ul class="num">
  <li><a href="tel:5551234567">Call (555)123-4567</a></li>
  <li>Box 564, Disneyland</li>
  <li><a href="mailto:EmailAddress@. XYZ.com"> Email.com </a></li> …
Run Code Online (Sandbox Code Playgroud)

html javascript css frontend

2
推荐指数
1
解决办法
318
查看次数

标签 统计

css ×1

frontend ×1

html ×1

javascript ×1