Html 在内容发生变化的情况下固定元素

我正在努力让我的元素保持原位。单击时，温度单位会发生变化（摄氏/华氏）

在两个数字之间切换效果很好（图中为首尔）。但当从两位数切换到一位数时，元素会向左移动（图中的巴黎）。这可能是因为我设置了

justify content:flex start

。但是，即使我设置了

justify content:center

，元素也不会完全保留在它们的位置上。他们移动了一点

我希望将大的温度值始终放在中心。并希望在精确位置的学位单位之间切换（以使轮班看起来更整洁）。

我尝试了

在

和其他

内容

值之间设置空格。我还尝试放置边距，以便在元素之间具有一致的缓冲区

这些是正在发生的事情的图像：

这是我的代码：

.info{
身高：70%；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
}
.临时集装箱{
宽度：130px；
显示器：flex；
调整内容：灵活启动；
光标：指针；
过渡：200ms缓解；
}
.temp_容器：悬停{
颜色：rgba（255、255、255、0.712）；
}
.min_max{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
右边距：5px；
}
麦克斯先生{
边缘底部：5px；
}
临时工{
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
临时大学学位{
字体大小：3.4rem；
字体大小：400；
右边距：2px；
}
温度单位{
字体大小：2.5rem；
}

时区

发生这种情况是因为内容发生变化时，

h2

宽度发生变化。在下面的示例中，静态宽度设置为

.temp\u degree

对代码的更改：选择符

.temp\u degree

中的最后两行

.info{
身高：70%；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
}
.临时集装箱{
宽度：130px；
显示器：flex；
调整内容：灵活启动；
光标：指针；
过渡：200ms缓解；
}
.temp_容器：悬停{
颜色：rgba（255、255、255、0.712）；
}
.min_max{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
右边距：5px；
}
麦克斯先生{
边缘底部：5px；
}
临时工{
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
}
临时大学学位{
字体大小：3.4rem；
字体大小：400；
右边距：2px；
宽度：4rem；
文本对齐：右对齐；
}
温度单位{
字体大小：2.5rem；
}

时区
10
℃

您也可以共享您的css代码吗？我们会更容易帮忙的哦，对了。刚刚加的。非常感谢。看起来好多了。但它似乎并不完美。例如，度数符号（°）应该保持在完全相同的位置，但它会移动一点。您是否可以发布一个更具可复制性的片段来处理？当前的代码片段只显示文本，没有其他内容。感谢您的帮助，但我刚刚找到了答案。我保留了你的内容，去掉了我的

.temp\u容器

上的宽度，并为里面的所有孩子设置了宽度。