Alignment of Facebook button at

Posted on 2011-10-26
Last Modified: 2012-05-12
We have added twitter and facebook buttons to our website but my developer is having trouble with the vertical alignment. The buttons (facebook and twitter) refuse to line up for some reason.

Here is the code for the "javascript-enabled widget" that holds both buttons:

<a style="display:inline;height:20px;vertical-align:bottom" href="" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//"></script>
<div style="display:inline;margin:0;padding:0 10px 0 5px; border:none;" class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
Question by:rtod2
    LVL 17

    Expert Comment

    I think this should work:
    div.hjawidget{vertical-align: top;}
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Most of the problem is coming from:

    .button_count a.connect_widget_like_button {
        padding: 2px 4px;

    which is coming from Facebook itself.  I have to wonder why you're doing it this way, though.  It would be easier to install any number of social sharing plugins whose developers have already solved this problem.
    LVL 17

    Expert Comment

    oh, actually what a changed was vertical align on this element. I am not sure why you have it explicitly set baseline, but if it doesn't affect the rest of your page, this does appear to fix the problem when I change it in firebug.

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        background: none repeat scroll 0 0 transparent;
        border: 0 none;
        margin: 0;
        padding: 0;
        vertical-align: top;

    Open in new window


    Author Comment

    My developer seems to have given up on this one today.  I'm becoming more familiar with the back-end but clearly not there yet.  Where would I put this in?
    LVL 17

    Accepted Solution

    That is the first css style in your stylesheet

    I just changed vertical-align from baseline to top.

    Just went to your site looks like you found it.

    Author Closing Comment

    Yes I did.  Great answer!  Thank You.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now