Question

我正在尝试将文本div置于自定义滑块中。

由于某种原因，CSS无法正常工作。该网站位于http://bit.ly/ZgawU6

的测试服务器上

我希望将顶部滑块中的“环境关注”文本组居中。与本网站类似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;
}

如果value为qual，则甚至不需要指定px，因为在％，em，px或其他任何设置为零的任何维度都将具有相同的大小。 零为零。

Answer 2

.custom-slider-caption, .custom-slider-title {
  width: 100%;
  line-height: 1.3;
  text-align: center;
}

Answer 3

如果你希望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;
}

Answer 4

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

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

}

滑块中的中心文本div

4 个答案: