帶CSS的垂直居中圖標

我正在構建一個網站。我的網站將有內容塊。每個區塊都會有一個標題，一些文字和一個圖標。我的挑戰是，我試圖將每個圖標垂直居中。目前，我有以下HTML或者您可以查看jsfiddle。帶CSS的垂直居中圖標

<blockquote> 
    <div class="row"> 
    <div class="small-10 columns"> 
     <h4>The Block Title</h4> 
     <em>Some small blurb</em> 
     <p>Here is a paragraph relating to this block. It may include a couple of sentences. These sentences will wrap. Ultimately, the heart needs to be vertically centered.</p> 
    </div> 

    <div class="small-2 columns"> 
     <span class="fi-heart" style="font-size:4rem;">&nbsp;</span> 
    </div> 
    </div> 
</blockquote>

在這個代碼塊中，我使用Zurb基金會來幫助佈局。但是，我似乎無法讓心形圖標垂直居中在右欄中。有誰知道我可以如何用CSS做到這一點？

謝謝

來源

2014-02-13 user3284007

有誰知道他的CSS是什麼樣子？ – HerrSerker

一個line-height屬性添加到您的內嵌樣式<span class="fi-heart">等於字體大小的值：

font-size:4em; line-height: 4em

來源

2014-02-13 14:13:30

感謝您的反饋。不過，我在提供的小提琴中嘗試了這種方法。不幸的是，這導致了blockquote元素的大小增加。我不希望這種情況發生。謝謝你。 – user3284007

並添加'vertical-align：middle'沒有幫助？ –

不，這沒有幫助。 – user3284007

帶CSS的垂直居中圖標

回答

相關問題