php - 将文本垂直对齐到新 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>

postmeta 的 CSS 是:

.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 专家，所以我只尝试了以下方法:- 添加“垂直对齐:文本顶部；”到CSS- 添加“显示:内联 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 ，它需要设置为按钮和它旁边的文本(不是在包含 block 元素上，而是在实际的内联元素上，包括按钮和它旁边的文本范围)。

我不认为 vertical-align: top 会产生您想要的效果，但您当然可以尝试一下:您需要将该属性添加到按钮和围绕旁边的文字。