Question

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

我的尝试

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>

Answer 1

我希望这是您正在寻找的。

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>

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

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

2 个答案: