画面の中央にli'imagesを作成する方法（反応的）

Question

基本的には、画面の中央に4つのソーシャルアイコンが表示されている小さな行が必要です。私はそれを画面の真ん中にしたいと思っていました。私はモバイル、ラップトップまたはタブで自分のページを開いています。

幅：50％を適用しましたが、問題はul liの画像が左側にあります。私ができることは、すべての画面解像度でメディアクエリを使用することですが、それはすべての画面/解像度の点ではうまくいかないでしょう。私は良い練習ではないクエリを作成する必要があります。

私はこの点についてもっと簡単に何かを見逃していると思いますが、私はそれを得ていません。

あなたは私のコードに要するにhere

を見ることができます：私はそれらの間の固定のギャップを持つすべての画面（大、小）で行の途中で私のすべての4つのアイコンを持っていると思います。あなたは、単にそれを行うためflexを使用することができます

HTML

<ul class="footerUl"> 
    <li> 
     <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
    </li> 
    <li> 
     <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
    </li> 
    <li> 
     <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
    </li> 
    <li> 
     <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
    </li> 
    <div class="clearfix"></div> 
</ul> 

CSS

.clearfix{clear:both;} 
ul li{list-style-type:none;float:left;padding-left:7%;} 
ul li:first-child{padding-left:0px !important;} 
ul li:last-child{padding-left:0px !important;} 
ul{padding-left:0px;width:50%;margin-left:auto;margin-right:auto;} 

Answer 1

。

レビュー以下の答え：私はこの方法が好きですかはわからない

.clearfix{ 
 
    clear: both; 
 
} 
 

 
ul li{ 
 
    list-style-type: none; 
 
    float: left; 
 
    padding-left: 20px; 
 
} 
 

 
ul li:first-child{ 
 
    padding-left: 0px !important; 
 
} 
 

 
ul li:last-child{ 
 
    padding-left: 0px !important; 
 
} 
 

 
ul{ 
 
    padding-left: 0px; 
 
    width: 50%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.footerUl { 
 
    display: flex; 
 
    justify-content: center; /* align horizontal */ 
 
    align-items: center; /* align vertical */ 
 
}

<ul class="footerUl"> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <div class="clearfix"></div> 
 
</ul>

Answer 2

。しかし、すぐに私はこの考えを持っています。

ul.footerUl{ 
 

 
text-align:center; 
 
} 
 
    
 
ul li{list-style-type:none;display:inline-block;} 
 
ul li img{ margin:5px 20px;}

<ul class="footerUl"> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    <li> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-128.png" height="32" width="32"> 
 
    </li> 
 
    
 
</ul>