社交媒體圖標集中在網站頁腳

對於CSS和HTML世界來說相當新鮮，所以我對先進的道歉。社交媒體圖標集中在網站頁腳

我有一個問題讓我的社交媒體圖標集中在我的網站底部。他們坐在底部沉重，而不是在頁腳中間。附加是問題的屏幕截圖以及它背後的代碼。

代碼片段：

.page-footer { 
 
    background-color: #F06D71; 
 
    padding: 1em; 
 
}

<footer class="page-footer"> 
 
    <ul> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    <img class="responsive-img" src="http://placehold.it/50x50"> 
 
    </ul> 
 
</footer>

我已經嘗試添加「填充底」的樣式表，但只是圖標變得更小而移動了幾個像素。

任何意見或任何條款，我應該看看？

問候

來源

2016-09-05 dosebot

「對齊：中心」並不爲你工作？ – GabMic

已棄用，請使用tex-align：center;現在 – mlegg

你應該在你的問題中寫下你的代碼，而不是它的圖像。 – Ricky

使用Flexbox的：

.page-footer{ 
display:flex; 
} 

.page-footer ul{ 
align-items:center; 
}

這將垂直居中頁腳裏面的圖標。您還應該將列表中的<li>標記包含在列表中。如果您還想將它們垂直居中放置，則可以將display：inline-block添加到列表元素，並將中心對齊到其父項（無序列表）。所以最終的代碼是：

.page-footer{ 
    display:flex; 
} 

.page-footer ul{ 
    justify-content:center; 
    text-align:center; 
} 

.page-footer ul li{ 
    display:inline-block; 
}

還有一件事我注意到了，你已經添加了相同的ID所有三個圖像。一個ID應該是一個唯一的標識符，並且只能在一個元素上使用。

來源

2016-09-05 21:44:40

Here是一個偉大的工具來做到這一點。

來源

2016-09-05 21:39:15 pa7ryk

簡單的解決方案：

對於類的.page-footer添加的display: table的屬性;

然後將您的圖片標記包裝在<div>中，並將display: table-cell的屬性分配給div以及vertical-align: middle;的屬性。

這樣做會將該div內的任何東西垂直對齊到元素的中間。

看到這個JsFiddle，我作爲一個示範。

來源

2016-09-05 22:08:46

即使對於有經驗的開發人員來說，這並不總是很明顯。如果你想在你的頁腳中只有圖像，你可以做填充。您還在<ul>標籤中缺少<li>。下面是一個例子：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
    .footer-list-item { 
     list-style-type: none; 
     display: inline-block; 
    } 

    .footer-list { 
     padding: 50px 0; 
     background: pink; 
     text-align: center; 
    } 
    </style> 
</head> 
<body> 
    <div class="footer"> 
    <ul class="footer-list"> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
     <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li> 
    </ul> 
    </div> 
</body> 
</html>

JSBin link

來源

2016-09-05 23:00:03

這個反應遲了一點。但是謝謝，這解決了我的問題！我閱讀了關於CSS技巧的flexbox。然後看到這個，並用我的codepen的東西，你的jsbin鏈接，它的工作！ :) – dosebot

社交媒體圖標集中在網站頁腳

回答

相關問題