Question

我正在创建一个英雄形象风格横幅，我希望将文本置于图像中间，但文本行必须保持对齐。

我有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>

Answer 1

你可以创建一个封闭的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/

Answer 2

只需在white-space:nowrap;代码上使用p。

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;
}

根据媒体查询的要求进行调整。

Answer 3

在线路突破发生之前拆分，因为你的p不够大。

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

.home-slider p {
   width: 725px;

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

Answer 4

我使用＆＃34;重置css＆＃34;函数;）：

* {
  margin: 0;
}

<p>个标签有边距

绝对中心文字但左对齐

4 个答案: