Aligning Text Vertically to the Top Next to New Twitter Button

Question

I am trying to add the new twitter button to one of my Wordpress templates. For an example, see here: http://johnkivus.com/2010/08/12/if-you-build-it/. I want the text aligned with the top edge of the button instead of the button. The code section that puts the twitter button in place is as follows:

            <div class="postmeta">
                <p><a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="kivus">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;&amp;nbsp;&amp;nbsp;&lt;?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> &middot; <?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></p>
            </div>

the CSS for postmeta is:

.postmeta {
    font-size: 11px;
    text-transform: uppercase;
    margin: 0px;
    padding: 5px 0px 0px 0px;
    border-top: 1px solid #333333;
    }

.postmeta p {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    }

I'm far from an expert in CSS, so I've only tried the following things: - adding "vertical-align: text-top;" to the css - adding "display: inline-block;" & "vertical-align: top;" - and, as a complete flyer, style='vertical-align: top' to the button.

What would be the easiest way to get the text aligned with the top of the button?

UPDATE Based on a suggestion from thomasrutter, I added a style to both the button and the text. This gets me much closer to what I want, however, the elements processed via PHP commands are still showing up aligned with the bottom of the image. The link is the same to see the current state of things: http://johnkivus.com/2010/08/12/if-you-build-it/ however the code is not as follows:

        <div class="postmeta">
            <p><a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="kivus" style="vertical-align: middle">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;&amp;nbsp;&amp;nbsp;&lt;span style="vertical-align: middle"><?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> &middot; <?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></span></p>
        </div>

Answer 1

You need to give both elements next to each other the same value for the vertical-align property.

In this case, where you are aligning a button with some text and the button is a different height to the text, I'd recommend vertical-align: middle which will need to be set on both the button and the text beside it (not on the containing block element, but on the actual inline elements including the button and the span of text beside it).

I don't predict that vertical-align: top would have the effect you desire, but you can certainly try it: you need to add that property to both the button and a span around the text that is beside it.