CSS的垂直居中图标

Question

I am building a web site. My web site will have blocks of content. Each block will have a title, some text, and an icon. My challenge is, I'm trying to vertically center each icon in the block. Currently, I have the following HTML or you can look at the jsfiddle .

<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>

In this code block, I'm using Zurb Foundation to help with layout. However, I can't seem to get the heart icon to center vertically in my right column. Does anyone know how I can do this with CSS?

Thank you

Answer 1

在您的内联样式中为<span class="fi-heart">添加一个line-height属性，其值等于font-size：

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