用HTML和CSS在砖石卡片中定位文本

13z8s7eq 于 2022-11-26 发布在其他

关注(0)|答案(2)|浏览(126)

几天来，我一直在尝试找到一种方法，让每一张砖石牌的标题和文字占据特定的位置，而不影响其他牌。在此期间，我几乎有了一个解决方案，但它破坏了其他设备中的视图。虽然解决方案肯定非常简单，但相当令人沮丧。
我希望绿色的文本在相同的位置像其他卡的文本。

第一个

2条答案

我认为您只需要将规则边距添加到内容以自动居中文本，因为您是在Flex容器中。

.content {
 margin: auto 0;
}

您有一个选择器，它只针对第一个框并设置特定的填充。请删除顶部填充，以便有统一白色。

.container .box:nth-child(1) {
  grid-column: span 2;
  grid-row: span 1;
  background: radial-gradient(#2bffc3, #72afd3);
  padding-top: 3vh
}

第一个元素中的img标签也是一个障碍，有必要吗？
因为img是一个inline-element，你可以把它放在h6中。注意图像将作为一个字符，所以如果你提供了一个太大的图像，它将向下推文本行。或者你可以通过绝对位置将它从正常流中删除。