居中社交媒体图标

Question

尝试将我的社交媒体图标水平居中并在屏幕尺寸发生变化时垂直折叠它们。关于我可以将什么应用到 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;}

Answer 1

试试这个：我添加了两个 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>

Answer 2

获取所有 i 标签。

用 div class.

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

居中社交媒体图标

Centering social media icons

html

css

icons

frontend

responsive-design