如何在不移动图像下方的背景图像上居中文本？ HTML/CSS

Posted 2023-03-05

【中文标题】如何在不移动图像下方的背景图像上居中文本？ HTML/CSS

【英文标题】：How do I center text over a background image without moving the image underneath? HTML/CSS

【发布时间】：2021-09-09 01:15:39

【问题描述】：

我有一个位于背景图像属性下的图像，并且该 div 类中有一些文本行。我一直使用 margin top 属性来移动文本以使其在图像上居中，但它也为图像添加了边距。我尝试使用 padding 道具，但它也拉伸了我放置的背景。如何在不将边距添加到其下方的图像的情况下使该文本居中？任何帮助表示赞赏。

【问题讨论】：

请向我们展示一些代码以及您尝试过的内容。

显示您的代码以使其更易于理解。

【参考方案1】：

您可以使用text-align: center、margin: auto 使文本居中。另外，使用display: flex; justify-content: center; align-items: center;。如果元素具有绝对定位，则需要另一种解决方案。或许，您应该对齐您的 div，但是... 需要通过代码示例进行澄清以便更好地理解。

【参考方案2】：

试试这样的

position: absolute;
top: 50%;
left: 50%;

在css文件中