如何使屏幕中心的li'images（響應）

基本上我想在屏幕中間有一個有4個社交圖標的小行。我想讓它在屏幕中間，我打開手機，筆記本電腦或標籤頁。如何使屏幕中心的li'images（響應）

我已經應用寬度：50％，但問題是ul李的圖像在左側。我所能做的就是對所有屏幕分辨率使用媒體查詢，但那樣做並不好，因爲對於每個屏幕/分辨率點我都必須進行查詢，這不是很好的做法。

我想我錯過了一些關於這一點更容易，但我沒有得到的。

你可以看到我的代碼here

總之：我想有我行的中間所有4個圖標在每個屏幕（大，小），它們之間的差距修復。

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;}

來源

2016-11-29 Leo the lion

檢查[這]（https://jsfiddle.net/3wvjo2om/）小提琴，李集寬度的25％與0填充和文本對齊中心 – Vanojx1

@ Vanojx1謝謝你，但你撥弄越來越破碎的小屏幕，我需要修復圖像之間的空間。 –

是重疊問題可以固定設置一個最小寬度的李元素（最小32px到「你需要的差距」px） – Vanojx1

您可以簡單地使用flex做這件事。

查看下面的回答：

.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>

來源

2016-11-29 10:07:54 pradeep1991singh

謝謝你，但一個問題是我想有修復圖像之間的空間。如果你能解決這個問題，那麼它會很好。 –

@Leasingion什麼是固定空間？ – pradeep1991singh

20 px在所有4圖標的意思。 –

我不知道如果你喜歡這種方式。但即時我有這個想法。

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>

來源

2016-11-29 10:23:02

謝謝你的時間，但從右側的小屏幕間隙是不一樣的左側.. BUD我得到了答案:) –

如何使屏幕中心的li'images（響應）

回答

相關問題