Search code examples
twitter-bootstrapfacebook-likegoogle-plus-one

Could not align social buttons horizontally

First of all, and before someone closes this question as "exact copy", I searched the site for and answer and couldn't find any which could help :)

I have a web page which has a social bar looks kinda like Bootstrap social bar in their front page. My site uses Bootstrap as the site template.

My problem with social buttons. I added Google+, Twitter and Facebook button and now I'm struggling in aligning correctly... thanks to Facebook button.

The code I'm using is exactly the same official code from the 3 social networks and I placed each button in an <li> of a <ul> (again, refer to Bootstrap front page for an example). Note: I added some background colour and some padding for make things clear.

The result of that is the image you see below (screen-shot from IE). Google+ and Twitter play nicely while Facebook makes things hard... or is it the opposite?

Social buttons

It's the same behaviour in all browsers I used for testing (IE, Firefox, Chrome and Opera)

UPDATE: Visit this Fiddle to see an example.

Solution

  • First of all, the LI aren’t all the same height – G+ and Twitter are 25px, FB like button is only 22px. Make all the LI the same height by adding height:25px for them in your style sheet.

    After that, just set vertical-align:middle for the LI as well, and they should align nicely.