居中社交媒体图标答案

【问题标题】：Centering social media icons居中社交媒体图标
【发布时间】：2020-10-27 22:11:27
【问题描述】：

尝试将我的社交媒体图标水平居中并在屏幕尺寸发生变化时垂直折叠它们。关于我可以应用到 css 来实现这一点的任何提示或建议？目前没有css应用于下面的图标..谢谢！！！

<footer class="footer">
        <div class="page-footer">
            <p style="font-family: 'Buena-Park-JF', serif; font-weight: 400; font-style: normal; font-size: 40px; text-align: center;"> Find Us!</p>
            <i class="fa fa-instagram" style="font-size:50px"></i>
            <i class="material-icons" style="font-size: 50px;">facebook</i>
            <i class="material-icons "style="font-size:50px">map</i>
            <i class="material-icons" style="font-size:50px">phone</i>
        
            
            

              </div>
    </footer> 



.footer {
padding-top: 60px;
background-color: #000;
color:#eae2d8;}

.page-footer{
width: 100%;
padding: 50px 0px 70px 0px;
background-color: $basic-dark-color;}

【问题讨论】：

欢迎你加入stackoverflow社区^_^，为了帮助你，你能把css代码放在这里吗？
@AziMez，刚刚添加了 css.. 谢谢。

标签： html css responsive-design icons frontend

【解决方案1】：

获取所有i 标签。

用div 类包围它们。

然后，在 div 之后的标签内添加：style="display:flex;justify-content:center;"
当您缩小栏时，它应该会起作用。

【讨论】：

【解决方案2】：

试试这个：我添加了两个 CSS 元素“container”和“i”

container {
        display: flex;
        display: -webkit-flex;

        flex-direction: row;
        -webkit-flex-direction: row;

        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;

        justify-content: center;
        -webkit-justify-content: center;
    margin: 0;
    padding: 0;
}

i {

    border: 3px solid yellow;
    margin: 10px;
    padding: 5px;
    
}

.footer {

padding-top: 60px;
 
background-color: #000;
color:#eae2d8;
}

.page-footer{
width: 100%;
padding: 50px 0px 70px 0px;
background-color: $basic-dark-color;



}

<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<footer class="footer">
        <div class="page-footer">
            <p style="font-family: 'Buena-Park-JF', serif; font-weight: 400; font-style: normal; font-size: 40px; text-align: center;"> Find Us!</p>
            
          
          <container>  
            <i class="fa fa-instagram" style="font-size:50px"></i>
            <i class="material-icons" style="font-size: 50px;">facebook</i>
            <i class="material-icons "style="font-size:50px">map</i>
            <i class="material-icons" style="font-size:50px">phone</i>
     </container>
        
            
            

              </div>
    </footer> 


</body>
</html>

【讨论】：