Html 居中文本分割滑块

我正在尝试在自定义滑块中居中放置文本div

由于某些原因，CSS无法工作。该网站位于我的测试服务器上

我想在顶部滑块中居中显示“环境问题”文本组。类似于本网站www.sevenly.org

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

有人能告诉我为什么这个代码不起作用吗

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

有关分区：

<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>

环境问题

如果希望div居中，代码应该是这样的

#div
{
 width:600px;
 margin-left:auto;
 margin-right:auto;
}

// NOTE: THE WIDTH CAN BE CHANGED //

#div p
{
 width:300px;
 margin-left:auto;
 margin-right:auto;
}

---

它不适用于绝对位置，因为绝对位置的元素不是100%宽度。您可以将witdh设置为100%，或者，稍微清洁一点的解决方案是将

right

值设置为零。因此，将

左

和

右

位置设置为零，宽度将自动设置为100%

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

---

如果值等于零，甚至不需要指定

px

，因为在%em、px或其他任何单位中设置为零的任何维度都具有相同的大小零是零

pzin的答案是正确的。使用此选择器：

.custom-slider-title > div {
    ...
    left: 0;
    right: 0;

---

}

Legend，感谢您的详细和透彻的解释！它正在工作。

.custom-slider-title > div {
    ...
    left: 0;
    right: 0;