绝对居中文本但左对齐答案

【问题标题】：Absolute center text but left aligned绝对居中文本但左对齐
【发布时间】：2016-03-24 19:51:56
【问题描述】：

我正在创建一个英雄图像风格的横幅，我想在图像中间居中放置文本，但让文本的行左对齐。

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

这个 js fiddle 展示了我目前所拥有的：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>

【问题讨论】：

你能用弹性盒子吗？
不幸的是，我们需要支持旧版浏览器，所以我们尽量远离 flexbox

标签： html css

【解决方案1】：

只需在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;
}

在媒体查询中根据需要进行调整。

【讨论】：

【解决方案2】：

您可以创建一个封闭的 div，该 div 将居中并将您的 p 包含在其中。

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/

【讨论】：

如果你缩小窗口大小，你会看到文本下降到 3 行，尽管还有空间可以容纳两个单词。理想情况下，我希望它保持在两个状态，直到它被媒体查询更改。
为 p 添加宽度？
p 需要创建自己的宽度，以便水平居中
就是这样！谢谢

【解决方案3】：

在换行发生之前拆分，因为你的 p 不够大。

你应该设置一个 width 属性来使你的 p 足够大以适应。 725px 应该适用于您的字体大小。如果它较小，则第一行换行。但是这个解决方案没有响应。

.home-slider p {
   width: 725px;

最终你也必须调整字体大小。

【讨论】：

【解决方案4】：

我使用“重置 css”功能；）：

* {
  margin: 0;
}

<p> 标签有边距

【讨论】：