Question

我正在建立一个网站。我的网站将有内容块。每个块都有一个标题，一些文本和一个图标。我的挑战是，我正在尝试垂直居中区块中的每个图标。目前，我有以下HTML或您可以查看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>

在这个代码块中，我正在使用Zurb Foundation来帮助进行布局。但是，我似乎无法让心脏图标在我的右栏中垂直居中。有谁知道我怎么能用CSS做到这一点？

谢谢

Answer 1

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

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

使用CSS垂直居中图标

1 个答案: