如何垂直堆叠图标并将其与其各自的文本对齐,以及如何将它们水平居中对齐?并使其全部适应移动设备?
我的尝试
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)