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

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

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

例如：

.circle{
背景：#1d1b；
边界半径：50%；
颜色：#fff；
显示：表格；
高度：50px；
字号：700；
字号：1.6em；
宽度：50px；
保证金：0自动；
边缘底部：10px；
浮动：左；
}
div{
显示：块；
高度：100px
}

1
Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum

2
Lorem ipsum orem ipsum orem ipsum

您可以使用

Flexbox

进行此操作。您只需在flex容器上添加

对齐项目：居中

，并从

.circle

中删除自动边距

如果要将文本置于圆圈内的中心，也可以使用

Flexbox

.circle{
背景：#1d1b；
边界半径：50%；
颜色：#fff；
显示：表格；
高度：50px；
字号：700；
字号：1.6em；
宽度：50px；
}
div{
显示器：flex；
对齐项目：居中；
}

1
Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum

2
Lorem ipsum orem ipsum orem ipsum

非常感谢您的详细回复。这对我帮助很大：——）