将文本垂直对齐到新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的专家，所以我只试过以下内容： - 添加“vertical-align：text-top;”到css - 添加“display：inline-block;” &“vertical-align：top;” - 作为一个完整的传单，style ='vertical-align：top'到按钮。

将文本与按钮顶部对齐的最简单方法是什么？

UPDATE 根据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会产生你想要的效果，但是你可以试试它：你需要将该属性添加到按钮和围绕旁边文本的范围。