Question

好的，所以我需要将文本置于滑块上方，并在文本后面加上一个黑色背景，以便它可读。简单地使用text-align：center在这个实例中不起作用，因为黑暗的背景占用了整个页面宽度

http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100

.wrapper h4{
    position: absolute;
    top: 50%; /* Would love to get rid of this! */
    color: red;
    margin: auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
 }
 .wrapper{
    position: relative;
    width: 100%;
    text-align: center;
}

因此，我能想到的唯一解决方案是使用左右css属性来定位它。所以在这种情况下，我左右各放40％。

http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100

.wrapper h4{
    position: absolute;
    top: 50%;
    color: red;
    margin: auto;
    left: 40%;
    right: 40%;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

问题是，这必须是一个动态页面，适用于所有不同的屏幕尺寸。使用这种方法，我必须编写我能想出的所有屏幕尺寸的值......似乎对我来说这不是一个雄辩的解决方案。另外，我现在也遇到了问题，如果用户增加了页面缩放，绝对文本会与其他元素重叠。

我还是个菜鸟，所以我希望有更好的方法吗？

谢谢大家！

Answer 1

在h4中添加文本：

<h4><span class=text>SOME TEXT</span></h4>

然后：

.text{
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
 }

你可以从h4中删除填充，所以h4将是：

.wrapper h4{
  position: absolute;
  top: 50%; /* Would love to get rid of this! */
  color: red;
  margin: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
 }

以下是pen

的固定版本

使用黑暗的背景将绝对文本居中放在图像上

1 个答案: