尽管内容发生了更改，但仍将元素固定到位

Question

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

在两个数字之间切换非常有效(图中为首尔(。但当从两位数切换到一位数时，元素会向左移动(图中的巴黎(。这可能是因为我设置了justify-content: flex-start。但是，即使我设置了justify-content: center，元素也不能完全停留在它们的位置。他们移动了一点。

我希望总是把大的温度数字放在中间。并希望在精确位置的度数单位之间切换(以使转换看起来更整洁(

我尝试过space-between和其他justify-content值。我还尝试过放置边距，以便在元素之间具有一致的缓冲区。

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

华氏版本

摄氏版本

这是我的代码：

.info {
height: 70%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.temp_container {
width: 130px;
display: flex;
justify-content: flex-start;
cursor: pointer;
transition: 200ms ease-out;
}
.temp_container:hover {
color: rgba(255, 255, 255, 0.712);
}
.min_max {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 5px;
}
.max {
margin-bottom: 5px;
}
.temp {
display: flex;
justify-content: flex-start;
align-items: center;
}
.temp_degree {
font-size: 3.4rem;
font-weight: 400;
margin-right: 2px;
}
.temp_unit {
font-size: 2.5rem;
}

<div class="container">
<div class="location">
<h2 class="timezone">Timezone</h2>
<div class="weatherIcon"></div>
</div>
<div class="info">
<div class="temp_container">
<div class="min_max">
<span class="max"></span>
<span class="min"></span>
</div>
<div class="temp">
<h2 class="temp_degree"></h2>
<span class="temp_unit"></span>
</div>
</div>
<div class="temp_desc"></div>
</div>
</div>

Answer 1

发生这种情况是因为h2宽度在内容更改时会发生更改。在下面的示例中，静态宽度被设置为.temp_degree。

代码的更改：.temp_degree选择器中的最后2行。

.info {
height: 70%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.temp_container {
width: 130px;
display: flex;
justify-content: flex-start;
cursor: pointer;
transition: 200ms ease-out;
}
.temp_container:hover {
color: rgba(255, 255, 255, 0.712);
}
.min_max {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 5px;
}
.max {
margin-bottom: 5px;
}
.temp {
display: flex;
justify-content: flex-start;
align-items: center;
}
.temp_degree {
font-size: 3.4rem;
font-weight: 400;
margin-right: 2px;
width: 4rem;
text-align: right;
}
.temp_unit {
font-size: 2.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="location">
<h2 class="timezone">Timezone</h2>
<div class="weatherIcon"></div>
</div>
<div class="info">
<div class="temp_container">
<div class="min_max">
<span class="max"></span>
<span class="min"></span>
</div>
<div class="temp">
<h2 class="temp_degree">10</h2>
<span class="temp_unit">℃</span>
</div>
</div>
<div class="temp_desc"></div>
</div>
</div>