0

我正在尝试将文本 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>
4

4 回答 4

2

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

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

您甚至不需要指定pxvalue 是否等于零，因为在 %、em、px 或其他任何值中设置为零的任何尺寸都将具有相同的大小。零就是零。

于 2013-04-13T09:08:18.840 回答
0 
.custom-slider-caption, .custom-slider-title {
  width: 100%;
  line-height: 1.3;
  text-align: center;
}
于 2013-04-13T09:04:11.320 回答
0

如果您希望 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;
}
于 2013-04-13T09:07:49.353 回答
0

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

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

}

于 2013-04-13T09:36:19.777 回答