У вас возникли проблемы с центрированием div с социальными значками

У меня есть набор значков социальных сетей, которые я хочу разместить в нижней части моего веб-сайта по центру, внутри коробки div.У вас возникли проблемы с центрированием div с социальными значками

Мой код выглядит правильно, но я уверен, что я что-то упустил.

Любая помощь была бы принята с благодарностью.

HTML

<div id="footerBar"> 
    <div id="icons"> 
     <a href="https://youtube.com/MYPROFILE"><img class="socialicon" <img   src="images/icons/youtube_dark.png" onmouseover="this.src='images/icons/youtube_red.png'" onmouseout="this.src='images/icons/youtube_dark.png'" alt="Subscribe on YouTube" width="32" height="32"> 

     <a href="https://twitter.com/MYPROFILE"><img class="socialicon" <img src="images/icons/twitter_dark.png" onmouseover="this.src='images/icons/twitter_blue.png'" onmouseout="this.src='images/icons/twitter_dark.png'" alt="Follow on Twitter" width="32" height="32"> 

     <a href="https://instagram.com/MYPROFILE"><img class="socialicon" <img src="images/icons/instagram_dark.png" onmouseover="this.src='images/icons/instagram_beige.png'" onmouseout="this.src='images/icons/instagram_dark.png'" alt="Follow on Instagram" width="32" height="32"> 

     <a href="https://behance.com/MYPROFILE"><img class="socialicon" <img src="images/icons/behance_dark.png" onmouseover="this.src='images/icons/behance_blue.png'" onmouseout="this.src='images/icons/behance_dark.png'" alt="Follow on Behance" width="32" height="32"> 

     <a href="https://uk.linkedin.com/in/MYPROFILE/"><img class="socialicon" <img src="images/icons/linkedin_dark.png" onmouseover="this.src='images/icons/linkedin_blue.png'" onmouseout="this.src='images/icons/linkedin_dark.png'" alt="Connect on LinkedIn" width="32" height="32"> 

     <a href="https://vimeo.com/MYPROFILE"><img class="socialicon" <img src="images/icons/vimeo_dark.png" onmouseover="this.src='images/icons/vimeo_blue.png'" onmouseout="this.src='images/icons/vimeo_dark.png'" alt="Subscribe on Vimeo" width="32" height="32"> 

    <a href="https://dribbble.com/MYPROFILE"><img class="socialicon" <img      src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src='images/icons/dribbble_dark.png'" alt="Follow on Dribbble" width="32"  height="32"> 
    </div> 
    </div>

CSS

#footerBar 
{ 
padding:5px; 
width:75%; 
height:50px; 
margin:10px auto; 
border:1px solid #1e1e1e; 
background-color: #f3f3f3; 
} 

.socialicon 
{ 
float:left; 
width:32px; 
height:32px; 
margin:auto; 
} 

.socialicon a 
{ 
float:left; 
width:32px; 
height:32px; 
margin:auto; 
vertical-align: middle; 
}

источник

2013-12-04 user1888478

Ваш html-код, по крайней мере, выглядит совершенно неправильно. PLZ взглянуть на него и создать скрипку для тестирования –

http://jsfiddle.net/7U4aE/4/

Добавляя #icons { text-align: center; } и a { display: inline-block; }, она выравнивает все дочерние элементы к центру дел. Затем вы можете добавить интервал между каждым значком.

Кроме того, я исправил теги <img>, так как ваша реализация была немного сломанной/беспорядочной. Вам не нужно гнездо <img <img ...>, как ты, только один из них, как это:

<img class="socialicon" src="..." onmouseover="..." onmouseout="..." alt="Subscribe on YouTube" width="32" height="32" />

Вы также не закроя <a> тегов, которые я добавил.

источник

2013-12-04 22:46:28 bunndan

Большое вам спасибо за помощь в этом, очень благодарен за вежливую помощь не только от вас самих, но и за всех выше. – user1888478

Я бы попробовать удалить float: left; из .socialicon.

Кроме того, фиксировать изображения теги

<img class="socialicon" <img src=

<img class="socialicon" src= ...

и конец тега

<img class="..." src="..." />

Brynn

источник

2013-12-04 22:41:08 Brynn

Попробуйте удалить float: left из .socialicon и использовать text-align: center для #footerbar

источник

2013-12-04 22:46:24 Cem

У вас возникли проблемы с центрированием div с социальными значками

ответ

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