<p> 文本左对齐，但我需要它在 <div> 类中的图像背景之上答案

【问题标题】：<p> text aligns left, but I need it on top of an image background in a <div> class<p> 文本左对齐，但我需要它在 <div> 类中的图像背景之上
【发布时间】：2014-07-24 13:48:12
【问题描述】：

我正在做一场噩梦，试图让一小段文字放在图像上，以我的页面为中心。我管理的最接近的是文本框现在稍微偏右了。

我正在尝试通过使用以图像为背景的 Div 类以及 div 类“TEST”内的段落内的文本来完成此操作。我这样做是因为我稍后想在悬停时对其进行动画处理，但目前我只是想让文本位于图像顶部！

我认为 margin: auto 0;会有所帮助，但它会导致更多问题，所以我将其删除并尝试 display: inline; 代替它让我更接近。现在我完全没有想法了......

这是 p CSS：

p  {    
    background: rgba(0,0,0,1);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 2px;
    line-height: 28px;
    text-align: center;
    position: absolute;
    bottom: 0;
    margin: 0;
    display: inline;
}

这是 Div CSS 及其类：

div { 
    height: 200px;
    margin: 40px 0 0 0;
    position: relative;
}

.TESTimage {
      background-image: url("https://eccentric.productions/assets/roundlogo");
      background-size: 100px; 
      background-repeat: no-repeat;
      background-position: center;
      height: 100px;
 }

最后是 HTML 的相关部分：

<body>
    <div class="TEST">
        <p>
            Writing
        </p>
    </div>
</body>

非常感谢任何可以帮助我的人，我已经使用 Stack Overflow 多年，但这是我第一次需要发布问题。你们做的很棒！

【问题讨论】：

你会做一个小提琴吗？ :)
所以这以“写作”为中心：codepen.io/anon/pen/ublzF。你想要背景上方的文字吗？

标签： html css

【解决方案1】：

您必须删除 p 标签中的 position: absolute; 我删除 .test 类中的 background-position: center center; 以方便查看。这里是html代码

  <!DOCTYPE html >
<html >
<head>
<style type="text/css">
p  {    
    background: rgba(0,0,0,1);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
     background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
     background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
    padding: 2px;
    line-height: 28px;
    text-align: center;

    bottom: 0;
    margin: 0;
    display: inline;
}

div { 
    height: 200px;
    margin: 40px 0 0 0;
    position: relative;
    }

.TEST {background-image: url("https://eccentric.productions/assets/roundlogo");
      background-size: 100px; 
      background-repeat: no-repeat;

      height: 100px;

      }
</style>
</head>

<body>
    <div class="TEST">
    <p>
    Writing
    </p>
    </div>
</body>
</html>

希望有帮助

【讨论】：

这是最接近我要找的东西，谢谢！最后，虽然我找到了另一种（更好的）方法来做我正在寻找的事情，感谢这个博客：geekgirllife.com/… 非常感谢所有发布答案的人:)

【解决方案2】：

你不能说 margin: 0 auto 或 text-align: center to absolute position 你必须使用左或右。我会给 p 一些宽度，比如 60px 和 left: calc(50% - 30px);

p  {    
background: rgba(0,0,0,1);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 2px;
line-height: 28px;
position: absolute;
width: 60px;
bottom: 0;
margin: 0;
left: calc(50% - 30px);
}

【讨论】：

【解决方案3】：

这是您想要实现的目标吗？ http://codepen.io/anon/pen/cCbtA

我在图像周围添加了一个边框，以便更容易看到。

抱歉，如果我误解了您想要的内容，但希望对您有所帮助！

HTML

 <div class="test">
    <p>
        Writing
    </p>
</div>

CSS

  .test {
  background-image: url("https://eccentric.productions/assets/roundlogo");
  background-size: 100px; 
  background-repeat: no-repeat;
  background-position: center;
height: 200px;
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #ccc;
 }


.test p {
text-align: center;
background: rgba(0,0,0,1);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
margin:0;
color: #fff;
}

【讨论】：

【解决方案4】：

如果您希望文字仅位于图片上方，这可能是您想要的？ http://www.w3schools.com/css/css_image_transparency.asp

【讨论】：

如果您只提供一个链接，为什么不将其作为评论而不是答案？