ソーシャルアイコンを水平方向にセンタリングする

私はhtml上の完全な初心者です。私は水平に2つのソーシャルメディアアイコンを中心にしようとしています。私は約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

を仕事を得るカントこれを試してください：link要素のため

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/例のplacehold.it画像を追加しました – EliTownsend

@EliTownsendありがとうございました！ – 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

ソーシャルアイコンを水平方向にセンタリングする

答えて

関連する問題