積み重なったフッターの水平フッタ

Question

積み重ねられたものから水平フッタを正しく作る方法が分かっていたのですが、現在私はソーシャルメディアアイコンの3つの行を持っています。私の名前とボタンの3つです。私はデスクトップの中でそれらを同じ行にして中心に置いて欲しい。もし誰かが本当に助けてくれる助言を私に与えることができたら！ありがとう！

<script 
 
\t \t \t src="https://code.jquery.com/jquery-1.11.3.min.js" 
 
\t \t \t integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" 
 
\t \t \t crossorigin="anonymous"></script>    
 
<script src="SlickNav-master/dist/jquery.slicknav.js"></script> 
 
      
 
<script> 
 
\t $(function(){ 
 
\t \t $('#menu').slicknav(); 
 
\t }); 
 
</script>

@media screen and (min-width: 568px){ 
 
    #powered_by_storenvy {display: none !important;} 
 
} 
 

 
@media screen and (min-width: 568px){ 
 
#footer_info {display: none;} 
 
} 
 
    #footer_links { 
 
    position: relative; 
 
    width: 100%; 
 
    text-align: center; 
 
    
 
    background: #1FA0A3; 
 

 
    font-size: 16px; 
 
    font-size: 1.6rem; 
 
    border-top: none; 
 
    padding:20px; 
 
    
 
} 
 

 
#footer_links ul { 
 
    
 
    text-transform: uppercase; 
 
    padding-left: 0; 
 
} 
 

 
#footer_links li { 
 
    line-height: 24px;line-height: 2.4rem; 
 
    list-style: none; 
 
    background-color: #1FA0A3;  /*: Footer background :*/ 
 
    margin-bottom: 5px;margin-bottom: .5rem; 
 
} 
 

 
#footer_links ul a { 
 
    color:black; 
 
    text-decoration: none; /*: Footer Links :*/; 
 
    padding: 0 6px; 
 
\t padding: 0 .6rem; 
 
    
 
} 
 

 
#footer_links a:hover { 
 
    color: #BBBBBB;     /*: Footer Links Hover :*/ 
 
} 
 

 
.footer-small { 
 
    font-size: 12px; 
 
    font-size: 1.2rem; 
 
} 
 

 

 
.ghost-button { 
 
    color: black; 
 
    
 
    border: 1px solid #009688; 
 
    font-size: 17px; 
 
    padding: 7px 12px; 
 
    font-weight: normal; 
 
    margin: 6px 0; 
 
\t width:250px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    font-family: 'Philosopher', sans-serif; 
 
    
 
} 
 

 
.ghost-button:hover, .ghost-button:active { 
 
    color:#fff; 
 
    background:#009688; 
 
}

<script src="https://use.fontawesome.com/a74e3d793f.js"></script> 
 

 
<div id="footer_links"> 
 
    <ul> 
 
    <li> 
 
     <a href="/contact"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i> 
 
</a> 
 
     <a href="/faq"><i class="fa fa-tumblr fa-2x" aria-hidden="true"></i> 
 

 
</a> 
 
     <a href="http://www.facebook.com" target="_blank"><i class="fa fa-twitter fa-2x " aria-hidden="true"></i></a> 
 
     <a href="http://www.blogger.com" target="_blank"><i class="fa fa-facebook fa-2x " aria-hidden="true"></i> 
 
\t </a> 
 
    
 
    </li> 
 
    <span class="footer-small"> MaKayla &copy; 2017</span> 
 
    
 
    
 
    <li> 
 
    <a href="https://superdevresources.com/super-simple-ghost-button-css/" class="ghost-button" target="_blank">Resume</a> \t 
 
    \t 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

あなたは@mediaクエリとフレキシボックスでそれを行うことができます。これにより、600pxが項目を変更するブレークポイントになります。

@media (min-width:600px) { 
    #footer_links ul { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    } 
}