Question

我使用了一个名为niftybuttons的网站为我的网站生成社交图标的html代码。任何人都能告诉我如何将图标居中并可能在它们之间增加空间吗？

HTML

<a href="http://facebook.com/makemoneywithjus" target="_blank">
   <img src="http://www.niftybuttons.com/retro/32/facebook.png" align="left" border="0" style="margin:1px;"></a><a href="http://twitter.com/makemoneywitjus" target="_blank">
   <img src="http://www.niftybuttons.com/retro/32/twitter.png" border="0" style="margin:1px;"  align="left">
</a>

<a href="http://youtube.com/user/makemoneywithjus" target="_blank">
   <img src="http://www.niftybuttons.com/retro/32/youtube.png" border="0" style="margin:1px;"  align="left">
</a>

<a href="www.linkedin.com/pub/justina-cipriano/92/779/6b5/" target="_blank">
   <img src="http://www.niftybuttons.com/retro/32/linkedin.png" border="0" style="margin:1px;"  align="left">
 </a>

<a href="https://plus.google.com/u/0/b/106075638630703080775/106075638630703080775/posts/p/pub" target="_blank">
   <img src="http://www.niftybuttons.com/retro/32/google-plus.png" border="0" style="margin:1px;" align="left">
</a>

Answer 1

在图标之间添加空格使用填充

#list-left #set li a{
padding: 0 8px 0 0;
}
ul#set li:nth-child(2) {
display: table-cell;
padding: 10px 2px 10px 30px;
}

Answer 2

试试这个小提琴：Demo

div{
    position: relative;
left: 35%;

}
div a{
    margin: 5px;
display: inline-block;
}

无法弄清楚如何将我获得的社交图标html居中

2 个答案: