html - 在 slider 中居中文本 div

Question

我正在尝试将自定义 slider 中的文本 div 居中。

出于某种原因，CSS 无法正常工作。该网站位于我的测试服务器上 http://bit.ly/ZgawU6

我想将文本组“环境问题”置于顶部 slider 的中心。类似于这个网站www.sevenly.org

当我将 div 更改为 position:relative 而不是 position:absolute 时，它​​会起作用；但是我只能用 Chrome 检查器更改它。当我将它添加到 CSS 文件时，它不起作用。

任何人都可以指出正确的方向来说明为什么这段代码不起作用吗？

.custom-slider-caption, .custom-slider-title {
line-height: 1.3;
text-align: center;
position: relative;
}

有问题的 div:

<div class="custom-slider-title" style="top: 0px; opacity: 1;"><div style="position: absolute; left:”0″px; top:140px; right:”0″px; bottom:px; font-size: 43px; color:#fff; text-shadow: 4px 4px 1px #497ca0; ">Environmental Concern</div></div>

Answer 1

它不适用于绝对位置，因为绝对定位元素不是 100% 宽度。您可以将 witdh 设置为 100%，或者，将 right 值设置为零是一种更清洁的解决方案。因此，您会将 left 和 right 位置设置为零，宽度将自动为 100%。

div {
  positon: absolute;
  top: 140px;
  left: 0;
  right: 0;
}

如果值等于零，您甚至不需要指定 px，因为以 %、em、px 或其他任何形式设置为零的任何维度都将具有相同的大小。 零就是零。