绝对中心的文字，但左对齐

我正在创建一个英雄图像风格的旗帜，我想要在图像中间的文本居中，但有文本的行左对齐。绝对中心的文字，但左对齐

我有一个p其中包含两行内容，由br分隔。我希望线条的宽度是最大量的内容的宽度，也是这条线要居中。下一行应该是文本左对齐。

这个js小提琴显示了我到目前为止有：https://jsfiddle.net/hnox2t18/

正如你所看到的，p并不总是延长是内容的宽度，而不是在分裂前排队。 p应该是内容的宽度，直到br，并以此宽度为中心。

CSS

.home-slider .home-slide { 
    position: relative; 
} 
.home-slider img { 
    width: 100%; 
} 
.home-slider p { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-family: "proxima-nova", Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 40px; 
    color: #ffffff; 
    line-height: 1em; 
} 
.home-slider span { 
    font-weight: bolder; 
}

HTML

<div class="home-slider"> 
    <div class="home-slide"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=0&w=800&h=400"> 
     <p>Over <span>1,500</span> ports, <span>3000</span> terminals<br />and  <span>6,800</span> berths</p> 
    </div> 
</div>

来源

2016-03-24 Sam Willis

你可以使用flexbox吗？ – wiesson

不幸的是，我们需要支持较旧的浏览器，所以试图远离flexbox –

在p标签只需使用white-space:nowrap;。

JSFiddle Demo

p { 

    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-family: "proxima-nova", Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 40px; 
    color: #ffffff; 
    line-height: 1em; 
    white-space:nowrap; 
}

根据需要调节在媒体查询。

来源

2016-03-24 11:39:16

您可以创建将里面集中，包括您的P上的封闭DIV。

CSS

.overlay { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

p { 
    font-family: "proxima-nova", Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 40px; 
    color: #ffffff; 
    line-height: 1em; 
}

HTML

...  
<div class="overlay"><p>Over <span>1,500</span> ports, <span>3000</span> terminals<br />and <span>6,800</span> berths</p></div> 
...

小提琴：https://jsfiddle.net/e4tqcs49/

来源

2016-03-24 11:19:58 wiesson

如果缩小窗口大小，则会看到文本会分成三行，尽管这两个单词仍有空间可放置。理想情况下，我希望它保持两年，直到它通过媒体查询进行更改。 –

给p添加一个宽度？ – wiesson

p需要创建它自己的宽度，以便它将水平居中 –

的断线发生前分手了，因为你的p是不够大。

你应该设置一个宽度属性，使你的p足够大以适应。 725px应该适合你的字体大小。如果它的第一条线断裂的话。但是这个解决方案没有响应。

.home-slider p { 
    width: 725px;

最后你还必须调整字体大小。

来源

2016-03-24 11:29:41

我用 “重置CSS” 功能）：

* { 
    margin: 0; 
}

<p>标签有利润

来源

2016-03-24 11:37:18

绝对中心的文字，但左对齐

回答

相关问题