响应式文本环绕对齐，用于中心 div 上的透明背景和纯色文本

Question

目标：让居中的 div 具有流畅的宽度，具有半透明背景和实心文本，并且在文本换行后在较小的屏幕上保持居中。

问题：当屏幕变小到足以让文本换行时，纯文本会向右移动而不是保持居中。

信息：我已经设法将两个答案结合起来，试图得到想要的结果（花了半天时间找到两个兼容的答案并将它们合并，作为初学者的痛苦）：

opacity of background only not text

responsive div centred with fluid width

<div id="divboxtable">
  <div id="divboxcell">
    <div id="divbox">
      <div class="divtxtbck">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
      <div class="divtxtfor">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
    </div>
  </div>
</div>

#divboxtable {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
}

#divboxcell {
  display: table-cell;
}

#divbox {
  display: inline-block;
  zoom: 1;
  position: relative;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.divtxtbck {
  background-color: #fffffa;
  padding: 0 10px 0 10px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  filter: alpha(opacity=50);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.50;
  opacity: 0.5;
}

.divtxtbck h1 {
//  visibility: hidden;
  color: red;
}

.divtxtfor {
  position: absolute;
  top: 0;
  left: 10px;
}

我已经注释掉了背景文本的隐藏特性，以便您可以看到对齐方式有何不同。这个问题似乎是因为绝对定位 - 但是当文本换行时你如何克服这个左对齐问题？

Fiddle 你必须缩小输出窗口直到文本换行——然后你会看到纯文本与透明文本的居中不同。

Answer 1

尝试使用媒体查询来实现预期的响应行为，并查看该位置：absolute;还显示：块；对于 id= divboxtable。另外，为什么你是 id 而不是类？希望对你有所帮助。