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元素“ 容器”和“ 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类包围它们。

然后，将其添加到div之后的标签内：style="display:flex;justify-content:center;"
缩小范围后应该可以使用。

居中社交媒体图标

2 个答案: