水平對齊社交圖標

我是一個完整的html新手。我試圖橫向放置兩個社交媒體圖標 - 我一定嘗試過大約30種不同的代碼組合，但沒有運氣。任何幫助將不勝感激 - 謝謝！我相信類似的問題已經被問，但我不能得到任何的解決方案，工作水平對齊社交圖標

a { 
 
    color: #444555; 
 
} 
 

 
.social-icon-container { 
 
    text-align:center !important; 
 
    
 
} 
 
    
 
a.social-icon { 
 
    display: inline-block !important; 
 
    margin:5px 20px; 
 
    padding:5px; 
 
    
 
}

<div class="social-icon-container"> 
 
<a href="URL"><img class="social-icon" src="http://www.placehold.it/32x32" alt="Twitter Logo"> 
 
       
 
<a href="URL"><img class="social-icon" src="http://www.placehold.it/32x32" alt="Facebook Logo"> 
 
</div>

來源

2016-05-17 KML

嗯不能得到任何的解決方案的工作。認爲我只需要刪除並重新開始。在我看來，所有的答案都可以在jsfiddle中工作，但是沒有一個能夠幫助我。 – KML

如果是這樣，請顯示更多的代碼。 – herrh

試試這個：用於鏈接元素

a{ 
display:inline-block; 
-webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    position: relative; 
    top: 50%; 
}

來源

2016-05-17 12:43:08

試試這個：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.social-wrapper { 
 
    background: green; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 
.social { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    background: red; 
 
    font-size: 0; 
 
} 
 
.social a { 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
    font-size: auto; 
 
}

<div class="social-wrapper"> 
 
    <div class="social"> 
 
     <a href="#"><img src="http://www.placehold.it/32x32" alt="fb"></a> 
 
     <a href="#"><img src="http://www.placehold.it/32x32" alt="tw"></a> 
 
    </div> 
 
</div>

來源

2016-05-17 12:43:30 herrh

你所擁有的代碼似乎很好。 See JSFiddle example。

但是你的html代碼不完整，你還沒有關閉你的img和a標籤。

<div class="social-icon-container"> 
    <a href="URL"><img class="social-icon" src="URL" alt="Twitter Logo" /></a> 

    <a href="URL"><img class="social-icon" src="URL" alt="Facebook Logo" /></a> 
</div>

來源

2016-05-17 12:45:32 Steveo

https://jsfiddle.net/Lgewex7m/2/我添加了示例 – EliTownsend

@EliTownsend Thankyou的placehold.it圖像！ – Steveo

使用此，代碼短，但好（和響應呢！）

main { 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<main> 
 
    <aside> 
 
    <a href="#"> 
 
     <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png" alt="Twitter Icon"></a> 
 
    <a href="#"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" alt="Facebook Icon"></a> 
 
    </aside> 
 
</main> 
 
</body> 
 
</html>

來源

2016-05-17 12:52:32 Blind

水平對齊社交圖標

回答

相關問題