如何在中心对齐图标和文本？
[英]How do I align icons and text in center?
问题描述
How do I vertically stack and align icons with their respective text, and horizontally align them center?
如何将图标与其各自的文本垂直堆叠和对齐，并将它们水平居中对齐？ And make it all mobile-responsive?并使其全部响应移动？
My attempt我的尝试
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>
2 个解决方案
解决方案1
4 2021-07-26 15:20:37
I hope this what you are looking for.我希望这是你正在寻找的。
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>
解决方案2
0 2021-07-26 15:26:58
You can use a flexbox wrapper with flex-direction row which switches to column using a media query and you could use flexboxes with flex-direction column for each item.您可以使用带有 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
居中对齐操作表文本和图标 - Center align the actionsheet text and icons
如何使用 JavaScript 居中对齐文本？ - How do I center align text using JavaScript?
如何让块对齐中心？ - How do I get block to align center?
如何将文字/课程与<style> tag when it won't center in css or style tag? - How do I align text/class with the button in the <style> tag when it won't center in css or style tag?
如何在径向图表的中心添加文本和/或将 dataLabels 对齐到条形图的末尾？ - How do I add text in the center of a radial chart and/or align the dataLabels to the end of the bars?
如何使文本居中并保持对齐？ - How can I center a text and keep being left align?
HTML：如何居中对齐图像 <li> 标签 - HTML: How do i center align an image inside an <li> tag
如何将 Box 阴影与屏幕中心对齐？ - How do I align Box shadow to the Center of the screen?
TO DO APP - 如何将 2 个图标对齐到 li 的右侧？ - TO DO APP - how to align the 2 icons to the right of the li?
`Phaser.Display.Align.In.Center` 适用于我的文本的第一行，但不能使我的第二行居中。 我如何解决它？ - `Phaser.Display.Align.In.Center` works well with the first line of my text but doesn't center my 2nd line. How do I fix it?
相关标签