Html 将两个div并排对齐，并将它们置于另一个div的中心

我试图将两个div（

.health icon

和

.health description

）并排放置，但将它们水平居中放置在

.health status

内。我能做到这一点

但是，它们没有正确地垂直对齐。我需要

.health description

行高

与

.ranking

的大小相同。但是，

.health description

似乎比

.health icon

低一点

。运行状况{
文本对齐：居中；
保证金：0自动；
}
.健康图标{
显示：内联块；
}
.健康说明{
显示：内联块；
线高：70px；
字体大小：粗体；
}
.评级圈{
高度：70像素；
宽度：70px；
边界半径：250px；
字体大小：36px；
字号：700；
颜色：白色；
线高：65px；
文本对齐：居中；
背景#2c3e50；
/*浮动：左*/
显示：内联块；
/*右边距：20px*/
左侧填充：2px；
垫顶：2件；
}

A.
UTI
123.456
门廊
-435,0
瓦里亚诺·德科托·普拉佐

这是一个非常具体的问题，因此我将给出一个不适用于一般情况的答案

将您的健康描述类更改为：

.health-description {
    display: inline-block;
    transform: translate(0, -30%);
}  

---

把你的代码放在这里我很难理解什么不适合你。当我查看JSFIDLE时，评级的基线和描述似乎是相同的。你是说一个比另一个低？你使用的是特定的浏览器或屏幕尺寸吗？是的@JECarterII，我使用的是Chrome。文本基线比圆低一些像素。两者的高度均为70px，但文本顶部和底部低于圆圈顶部和底部。这可能是局部瑕疵。检查你的缩放级别等。我在这里使用了一个屏幕截图，发现Chrome中的基线是完全相同的像素行。事实上，这个答案不能用于一般情况。一旦我调整容器的大小，它就会松开对齐。如果你想要有一个响应性的设计，你必须重新考虑你的标记，或者简单地使用图标的图像，而不是css解决方案