Выравнивание текста по вертикали вверху рядом с новой кнопкой Twitter

Question

Я пытаюсь добавить новую кнопку Twitter в один из моих шаблонов Wordpress.Пример см. Здесь: http://johnkivus.com/2010/08/12/if-you-build-it/. Я хочу, чтобы текст был выровнен по верхнему краю кнопки вместо кнопки.Секция кода, которая помещает кнопку Twitter на место, выглядит следующим образом:

            <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"></script>&nbsp;&nbsp;<?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> &middot; <?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></p>
            </div>

CSS для postmeta:

.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;
    }

Я далеко не эксперт в CSS, поэтому япробовал только следующие вещи: - добавление «vertical-align: text-top;»к css - добавление "display: inline-block;"& "вертикальное выравнивание: верх;"- и, как полный флаер, style = 'vertical-align: top' для кнопки.

Какой самый простой способ выровнять текст по верху кнопки?

ОБНОВЛЕНИЕ Основываясь на предложении от thomasrutter, я добавил стиль для обоихкнопка и текст.Это делает меня намного ближе к тому, что я хочу, однако элементы, обработанные с помощью команд PHP, все еще отображаются выровненными по нижней части изображения.Ссылка такая же, чтобы увидеть текущее состояние: http://johnkivus.com/2010/08/12/if-you-build-it/ однако код не такой:

        <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"></script>&nbsp;&nbsp;<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

Необходимо присвоить обоим элементам рядом друг с другом одинаковое значение для свойства vertical-align.

В этом случае, когда вы выравниваете кнопку с каким-либо текстом, а высота кнопки отличается от высоты текста, я бы порекомендовал vertical-align: middle, который необходимо будет установить как для кнопки, так и для текста рядом с ней ( не на элементе, содержащем блок, а на фактические встроенные элементы, включая кнопку и область текста рядом с ней).

Я не предсказываю, что vertical-align: top даст желаемый эффект, но вы, безусловно, можете попробовать его: вам нужно добавить это свойство как к кнопке, так и к промежутку вокруг текста рядом с ним.