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的专家，所以我只尝试了以下事项： - 添加“vertical-align：text-top;”到了css - 添加“display：inline-block;” ＆安培; “vertical-align：top;” - 并且，作为完整的传单，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会产生你想要的效果，但你当然可以尝试：你需要将该属性添加到按钮和旁边文本的跨度。< / p>

将文本垂直对齐到新Twitter按钮旁边的顶部

1 个答案: