如何将图标和文本居中对齐？答案

【问题标题】：How do I align icons and text in center?如何将图标和文本居中对齐？
【发布时间】：2021-07-26 14:56:49
【问题描述】：

如何将图标与其各自的文本垂直堆叠和对齐，并水平居中对齐？并使其全部响应移动设备？

我的尝试

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

<!-- 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>
</ul>

【问题讨论】：

什么是“前”？
对不起，我拼错了我的意思是图标

标签： javascript html css frontend

【解决方案1】：

我希望这就是你要找的。p>

ul {
  display:flex;
}

ul li i{
padding:10px;
}
ul li {
display:flex;
flex:1;
padding:20px;
flex-direction:column;
text-align:center;
}

@media only screen and (max-width: 600px){
  ul {
    flex-direction:column;
  }
}

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <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" />
 </head>
<body>
  <ul>
    <li>
      <i class="fas fa-phone"></i>
      <a href="tel:5551234567">Call (555)123-4567</a>
    </li>
    <li>
      <i class="fas fa-map"> </i>
      <span>Box 564, Disneyland<span>
    </li>
    <li>
      <i class="fas fa-paper-plane"></i>
      <a href="mailto:EmailAddress@. XYZ.com"> Email.com </a>
    </li>
  </ul>
</body>
</html>

【讨论】：

@TimothyAlexisVass 我很想见哥哥。
抱歉，建议的编辑队列已满。
@TimothyAlexisVass 兄弟你能分享一下codepen链接吗？
您可以通过将 CSS 放在应有的位置并将 HTML 放在应有的位置来正确使用 sn-p。您可以从 CSS 中删除所有多余的东西，例如 .num 和 li。您还可以单击“整理”以使用正确的缩进来整理您的代码......对于所有这一切，您可以使用正确的 html 做法，而不是使用 OP 使用的相同的不良做法列表元素。
@TimothyAlexisVass 谢谢兄弟下次会记住的。

【解决方案2】：

您可以使用带有 flex-direction 行的 flexbox 包装器，该行使用媒体查询切换到列，您可以为每个项目使用带有 flex-direction 列的 flexboxes。

#flexwrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.flexbox {
  width: 120px;
  margin: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 10px;
}

a {
  color: #569;
  text-decoration: none;
}

i {
  padding: 10px;
  border-radius: 100%;
  background: #569;
  color: white;
}

@media only screen and (max-width: 480px){
  #flexwrapper {
    flex-direction: column;
  }
}

<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"
/>
<div id="flexwrapper">
  <div class="flexbox">
    <p><i class="fas fa-phone"></i></p>
    <p><a href="tel:5551234567">Call (555)123-4567</a></p>
  </div>

  <div class="flexbox">
    <p><i class="fas fa-map"></i></p>
    <p>Box 564, Disneyland</p>
  </div>

  <div class="flexbox">
    <p><i class="fas fa-paper-plane"></i></p>
    <p><a href="mailto:EmailAddress@. XYZ.com"> Email.com </a></p>
  </div>
</div>

【讨论】：