如何使用背景图像居中文本？

Question

如何将文字居中到background-color: black？我使用了绝对位置和百分比，但随着窗口调整大小，文本失去了位置并产生了间隙。无论我在左侧和右侧添加多少百分比，我都无法居中。

.theimage {
  background-color: red;
  background-image: url('https://www.guidedogs.org.uk/media/5105/image-of-a-puppy-sitting-sap-homepage.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: black;
  height: 300px;
}

.textdiv {
  position: absolute;
  left: 50%;
  right: 20%;
  top: 20%;
  color: white;
}

<div class="theimage"> </div>
<div class="textdiv">text texttext text text text text text textext texttext text text text text text text text text text text tetext texttext text text texttext text text text text text text text textexttext text text text text texttext text texttext text text text textext
  text text text text text text text text</div>

Answer 1

根据您的描述，您似乎只是指水平居中。你不需要两个div。由于您将图像放在后台，因此可以将文本放在相同的div。

中

您可以使用简单的数学来达到您想要的效果。你的图片尺寸为451x661，你将它压成300高div，所以宽度变为204.看来你正试图在文字周围使用20％的填充，所以只需添加204使用calc()函数向左填充。请务必使用box-sizing: border-box;确保填充内容包含在维度中：

＆＃13;

＆＃13;

.theimage {
  background-image: url('https://www.guidedogs.org.uk/media/5105/image-of-a-puppy-sitting-sap-homepage.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: black;
  height: 300px;
  /* The lines below are for the text */
  color: white;
  padding: 20px 20% 20px calc(20% + 204px);
  box-sizing: border-box;
}

＆＃13;

<div class="theimage">text texttext text text text text text textext 
texttext text text text text text text text text text text tetext texttext text 
text texttext text text text text text text text textexttext text text text 
text texttext text texttext text text text textext text text text text text 
text text text</div>

＆＃13;

＆＃13;

＆＃13;

当然，您也可以使用绝对定位相同的想法，或者您可以将textdiv置于theimage内并使用相同的想法而无需绝对定位：

＆＃13;

＆＃13;

.theimage {
  background-image: url('https://www.guidedogs.org.uk/media/5105/image-of-a-puppy-sitting-sap-homepage.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-color: black;
  height: 300px;
}

.textdiv {
  color: white;
  padding: 20px 20% 20px calc(20% + 204px);
}

＆＃13;

<div class="theimage">
  <div class="textdiv">text texttext text text text text text
  textext texttext text text text text text text text text text
  text tetext texttext text text texttext text text text text
  text text text textexttext text text text text texttext text
  texttext text text text textext text text text text text text text text</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用right: calc(50% - [image-width]px)以下50% - 204px;示例：

HTML：

<div class="theimage"> </div>
<div class="textdiv">text texttext text text text text text textext texttext text text text text text text text text text text tetext texttext text text texttext text text text text text text text textexttext text text text text texttext text texttext text text text textext text text text text text text text text</div>

的CSS：

    .theimage {
        background-color: red;
        background-image: url('https://www.guidedogs.org.uk/media/5105/image-of-a-puppy-sitting-sap-homepage.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: black;
        height: 300px;
    }

    .textdiv {
        position: absolute;
        left: 50%;
        right: calc(50% - 204px);
        top: 20%;
        color: white;
        text-align: justify;
    }

希望你得到答案）