Question

我试图将这两个文本元素集中在一起，但遇到了麻烦。我只是使用text-align:center;将两个元素集中在一起没有问题，但我实际上希望子标题和标题都从同一点开始。因此它应该看起来像下面这样，标题文本直接在中心。我希望我已经说清楚了，如果有必要，我可以提供一张照片。

我应该提到这些div是响应性的，因此它必须适用于任何尺寸而不仅仅是“放置左边：50％＆＃34;或类似的东西：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

Answer 2

您可以使用以下样式包装带有额外div的文本：

display:inline-block; text-align:left

演示：http://codepen.io/Nargus/pen/jEgVMb

包装元素将以外部text-align：center为中心;规则，但在其中你有文字对齐：左; 这是一个比固定宽度和边距更好的方法：auto;用于居中

Answer 3

将两者都包裹在<div>内，然后使用以下CSS代替<div>

div {
    width: 250px; /* Or the maximum of the wides text */
    margin: 0 auto;
}

这会将div定位到中心，但让文本保持不变。如果<div>的宽度仅为宽文本的最大宽度，则应该适合。

小提琴：http://jsfiddle.net/xLgxsme7/

修改的

如果您想使用<span>，则必须使用display: block;，因为您无法更改内联元素的宽度。

Answer 4

您是否尝试使用亲戚定位P类？它可以工作。

PS：您的img标签未关闭，插入/之前＆gt;

将2个文本元素置于图像顶部

4 个答案: