html - 在图像顶部居中放置 2 个文本元素

Question

我试图将这 2 个文本元素居中，但遇到了问题。只需使用 text-align:center;，我就可以将两个元素居中，但实际上我希望副标题和标题都从同一点开始。所以它应该看起来像下面这样，标题文本直接位于中心。我希望我已经说清楚了，如有必要，我可以提供图片。

我应该提到这些 div 是响应式的，所以它必须适用于任何尺寸，而不仅仅是“左放:50%”或类似的东西:P

            sub-heading
            heading text here


<div>
  <img class="center-block" src="img/shop-1.jpg">
  <span>
    <p class="sub-heading">sub-heading</p>
    <p class="heading">heading text here</p>
  </span>
</div>

CSS:

.shop span {
    position: absolute; 
    top: 30%; 
    left: 0;
    width: 100%; 
}

.shop span p {
    padding: 0;
}

.shop span .heading {
    color: #fafafa;
    font-size: 40px;
    text-shadow: 0 0 10px #ecd781, 0 0 20px #ecd781, 0 0 40px #ecd781, 0 0 80px #ecd781;
    /*text-shadow: 0 0 5px #ecd781;*/
    font-weight: 500;
}

Answer 1

如下更改您的 .shop span CSS:

.shop span {
  position: absolute; 
  top: 30%; 
  left: 50%;
  transform: translatex(-50%);
  white-space: nowrap;
}

这将使它基于两个标题中最大的一个居中。 (如果 sub-heading 比 heading 宽，这将不符合您的要求。)

Fiddle