垂直居中对齐图标旁边的文本

Question

我有2个文本块，每个文本旁边都有一个圆圈。

我想垂直居中对齐文本块和图标。现在，如果其中一个文本块只有一行，则它被强制到顶部而不是居中。

示例：https://jsfiddle.net/cq0cj74o/

<div>
<p class="circle"><span>1</span></p>
<p>Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum </p>
</div>

<div>
<p class="circle"><span>2</span></p>
<p>Lorem ipsum orem ipsum orem ipsum </p>
</div>

 MovieMDB.credits(apiKey, movieID: movieID){
        apiReturn, credits in

        var producer: [String:AnyObject]?
        if let credits = credits {
            for crew in credits.crew {
                if crew.job == "Producer" {
                     producer = crew
                     break
                }
            }
        }
        // here check producer is not nil to ensure it was found
    }

Answer 1

您可以使用Flexbox。您只需在flex-container上添加align-items: center，并从.circle中删除自动边距。

如果您想将文字置于圈子中心，您还可以Flexbox使用.circle { background: #1d1d1b; border-radius: 50%; color: #fff; display: table; height: 50px; font-weight: 700; font-size: 1.6em; width: 50px; } div { display: flex; align-items: center; }。

＆＃13;

＆＃13;

<div>
  <p class="circle"><span>1</span></p>
  <p>Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum </p>
</div>

<div>
  <p class="circle"><span>2</span></p>
  <p>Lorem ipsum orem ipsum orem ipsum </p>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;