将文本与图标垂直居中对齐

Question

将文本与图标垂直居中对齐

3

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

我想要垂直居中对齐这些带图标的文本块。现在，如果其中一块文本只有一行，它会被强制置于顶部而不是中心。

.circle {
    background: #1d1d1b;
    border-radius: 50%;
    color: #fff;
    display: table;
    height: 50px;
    font-weight: 700;
    font-size: 1.6em;
    width: 50px;
    margin: 0 auto;
    margin-bottom: 10px;
    float: left;
}

div {
  display:block;
  height:100px
}

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

- michaelmcgurk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nenad Vracar · Accepted Answer

你可以使用Flexbox来实现。你只需在flex容器上添加align-items: center，并从.circle中移除margin auto。

如果你想在圆圈内部居中文本，你也可以使用Flexbox DEMO。

.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;
}

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