CODEWITHSUNDEEP
css
Abysmall
Abysmall

Reputation: 3

How to align social media icons in one row?

I managed to add facebook, twitter and g +1 social media buttons to my website in one row. But when I try to add the VK like button to the same row it just goes beneath the rest.

  1. I tried aligning all 4 of them by using CSS and all buttons aligned correctly while the VK button just displaced to a new row. Here is how I tried doing it:

#Social { text-align: center; margin-bottom: 20px;

  1. Tried using basic HTML <center></center> and same story first 3 buttons did align, the VK button went to a new row.

Here is the code for VK button: <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script>

Hope you can help me sort this one out. Thanks in advance!

Upvotes: 0

Views: 4525

Answers (2)

Steve Atkinson
Steve Atkinson

Reputation: 1239

It's because the VK code is wrapping your button in a div tag which is a block element. To fix it you must either replace the div with a span (keeping the id the same) or if that doesn't work because the JavaScript is looking explicity for a div with that id, then do as Robert suggests: style the div to be display inline-block which tells the browser to render a block element as if it were an inline element.

Upvotes: 2

Robert Hoffmann
Robert Hoffmann

Reputation: 2416

#vk_like { display: inline-block; } ?

Upvotes: 1

Related Questions