HTML和CSS对齐问题

我正试图让h1标签日期文本“今天，周二，周三，周四”在上面的云图像的正下方和中心对齐。我觉得我什么都试过了，但还是没能把它放好。代码如下。我试着把他们放在同一个分区内，但没有用

.bottomh1{
字号：18px；
字号：700；
}
.底部.天气图{
显示：内联块；
}
.bottom.weatherdays h1{
字号：18px；
字号：700；
显示：内联块；
右边距：12px；
左边距：18px；
}
.底部.天气.今天{
左侧填充：2px；
}
.下.天气预报.星期二{
左侧填充：2px；
}
.bottom.weatherdays.wed{
右侧填充：5px；
左侧填充：5px；
}
.bottom.weatherdays.周四{
右侧填充：5px；
左侧填充：5px；
}
@仅介质屏幕和（最大宽度：531px）{
.底部.天气图{
最大宽度：30px；
右边距：3倍；
左边距：5px；
}
.bottom.weatherdays h1{
字体大小：10px；
右边距：8px；
左边距：10px；
}
}

天气
今天
星期二
结婚
星期四

Flexbox应该提供一个简单的解决方案

.bottomh1{
字号：18px；
字号：700；
}
.底部.天气图{
显示：内联块；
}
.bottom.weatherdays h1{
字号：18px；
字号：700；
显示：内联块；
右边距：12px；
左边距：18px；
}
.底部.天气.今天{
左侧填充：2px；
}
.下.天气预报.星期二{
左侧填充：2px；
}
.bottom.weatherdays.wed{
右侧填充：5px；
左侧填充：5px；
}
.bottom.weatherdays.周四{
右侧填充：5px；
左侧填充：5px；
}
@仅介质屏幕和（最大宽度：531px）{
.底部.天气图{
最大宽度：30px；
右边距：3倍；
左边距：5px；
}
.bottom.weatherdays h1{
字体大小：10px；
右边距：8px；
左边距：10px；
}
}
气象处，
天气预报组{
显示器：flex；
}
部门天气>*，
部门天气预报>*{
弹性：25%；
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}

天气
今天
星期二
结婚
星期四

您的示例似乎缺少一个类为bottomHi的元素，“bottom”类是包含所有上述html的部分。谢谢，这已正确对齐了文本，但现在已将我的图像放大以适合每个h1天气日标记将您的图像放在

div

s中。像这样使用

display:flex

，每个元素都被拉伸到容器宽度的25%。对于

h1

，它不明显，因为文本包含在元素中。文本保持不变，文本周围的空白被拉伸。对于图像，图像是整个元素，因此整个图像被拉伸。再次感谢您的快速回复。你是在建议我把这些图像放在不同的分区里吗？是的。将

img

标签分别放入各自的

div

中，图像本身不会拉伸。我也更新了我的答案。我认为这更符合你的愿望。请注意，代码中图像的路径是相对的，因此我无法在此处看到它们。我进行了另一次更新。我使用了占位符图像，因为我没有你的云图像。我没有使用

text align:center

将文本居中，而是将包含图像的div和h1s设置为flex项。这使我可以适当地将文本和图像居中，并正确地对齐云图像（我注意到“今天”的图像有点大）。