將文本垂直對齊到新Twitter按鈕的旁邊

我正在嘗試將新的Twitter按鈕添加到我的Wordpress模板之一。有關示例，請參閱此處：http://johnkivus.com/2010/08/12/if-you-build-it/。我希望文本與按鈕的頂部邊緣對齊，而不是按鈕。這使替代Twitter的按鈕的代碼段如下：將文本垂直對齊到新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>

來源

2010-08-13 Kivus

也許你應該玩線高一點... – wintercounter 2013-05-10 12:04:25

你需要給彼此相鄰的同一個值vertical-align屬性兩個元素。

在這種情況下，如果您將按鈕與某些文本對齊，並且該按鈕與文本高度不同，則我建議使用vertical-align: middle，這需要在按鈕和旁邊的文本上設置（不是在包含的塊元素上，但在實際的內聯元素上，包括按鈕和旁邊的文本範圍）。

我不認爲vertical-align: top會產生你想要的效果，但是你可以試試它：你需要將該屬性添加到按鈕和圍繞旁邊文本的範圍。

來源

2010-08-13 02:09:17 thomasrutter

這讓我更接近我期望的效果。您知道如何將樣式應用到PHP元素本身，因爲它仍然與底部對齊？你可以在http://johnkivus.com/2010/08/12/if-you-build-it/ 看到更新我會把新代碼放在問題中，因爲我不能在這裏發佈它。 – Kivus 2010-08-13 03:41:58

看起來像腳本實際上用iframe取代了「Tweet」鏈接（如果您使用帶有Firebug擴展名的Inspect元素）。您需要在該iframe上以及在該跨度上放置垂直對齊。我認爲你在正確的軌道上。 – thomasrutter 2010-08-13 03:54:01

將文本垂直對齊到新Twitter按鈕的旁邊

回答

相關問題