我如何垂直堆叠和对齐图标与其各自的文本,并水平对齐它们居中?并使其全部响应移动设备?
我的尝试
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>
答案 0 :(得分:4)
我希望这是您正在寻找的。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>
答案 1 :(得分:1)
您可以使用带有 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>