Question

目标：有一个居中的div，其流体宽度为半透明背景，带有纯文本，并在文本换行后保持在较小屏幕上居中。

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

信息：我设法将两个答案结合起来尝试并获得所需的结果（花了半天时间找到两个兼容的答案并合并它们，成为初学者的困境）：

<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

尝试使用媒体查询来预期响应行为，并且还要查看该位置：绝对;还显示：块;对于id = divboxtable。你也为什么要改为上课？希望对你有帮助。

响应式文本换行对齐透明背景和居中div

1 个答案: