Html CSS将文本锚定到图像角

我试图做出一个响应性设计，即图像根据视口缩放，取决于视口的宽度或高度限制图像，它永远不会超过视口

这很容易实现，但现在我遇到了一个问题，即图像上的左对齐标题当然不会跟随中间的图像，而是紧贴页面边距。我试着用各种不同的计算填充物和其他垃圾做实验，但到目前为止我还没弄明白

理想情况下，我想做的是根据视口缩放一个长方体，并将该长方体居中对齐，然后在长方体内部有一个全宽图像，并在其上方有一个左对齐的标题

这是我到目前为止得到的，请原谅粗俗的CSS

代码：

/*创建一个浮动列*/
.栏目{
浮动：中心；
宽度：100%；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*为文章添加卡片效果*/
.卡片{
背景色：var（--bg色）；
填充物：1vw；
利润率最高：1vw；
光标：指针；
宽度：100%；
边框样式：无；
}
.卡h3{
颜色：var（--文本颜色）；
字体系列：“Lato”，无衬线；
字体大小：3vw；
文本对齐：左对齐；
左边距：1.5vw；
利润底部：0vw；
利润上限：0vw；
}
.卡img{
显示：块；
宽度：自动；
高度：自动；
最大宽度：95vw；
最大高度：75vh；
左边距：自动；
右边距：自动；
填充物：1vw；
}

您可以将

h3

和

img

包装在

div

中，并将其居中放置。顺便说一句，float:center不存在。

您可以将

h3

和

img

包装在

div

中并将其居中。顺便说一句，float:center不存在。

假设您可以更改HTML结构，并且可以使用更具语义的HTML结构，那么您应该使用以下内容

.card{
显示器：flex；
证明内容：中心；
}

说明文字

假设您可以更改HTML结构，并且可以使用更具语义的HTML结构，那么您应该遵循以下步骤

.card{
显示器：flex；
证明内容：中心；
}

说明文字

为什么要使用

标记作为包装器？简单的答案是；因为我希望整个东西都可以点击。如果这是正确的方式，我不确定。如果我的答案解决了你的问题，请将其标记为正确，以便其他人可以看到它已被回答。为什么使用

标记作为包装？简短的答案是；因为我希望整个东西都可以点击。如果这是正确的方法，我不确定。如果我的答案解决了你的问题，请将其标记为正确，以便其他人可以看到它已被回答。我尝试了这个方法，但我无法使其按预期工作，H3标题总是在左边缘右侧1.5 vw…它应该在检查员中可见，是什么导致

1.5vw

偏移。当您找到它时，将其重置为0<代码>按钮{padding:0}我尝试过这个方法，但无法按预期工作，H3标题总是在左边距右侧1.5vw…它应该在检查器中可见，是什么导致了

1.5vw

偏移。当您找到它时，将其重置为0<代码>按钮{填充：0}