Центрирование социальных иконок горизонтально

Я полный новичок на 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/ Я добавил изображения placehold.it для примера – EliTownsend

@EliTownsend Thankyou! – 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

Центрирование социальных иконок горизонтально

ответ

Смежные вопросы