絶対中心のテキストですが左揃え

Question

私はイメージの中央にテキストを配置したいが、テキストの行は一揃えにしておくヒーローイメージスタイルのバナーを作成しています。

brで区切られた2行の内容を含むpがあります。私は、行の幅をコンテンツの最大量の幅にし、この行を中央に配置したい。次の行は、テキストを左に揃える必要があります。

これはフィドルは私がこれまで持っているものを示してJS：https://jsfiddle.net/hnox2t18/

あなたが見ることができるように、p代わりに、常に最初のラインアップを分割、コンテンツの幅であることをストレッチしません。 pはコンテンツの幅がbrまでで、この幅の中央に配置する必要があります。あなたが中心になります囲むdiv要素を作成し、内部のあなたのpを含むことができ

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

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

メディアクエリで必要に応じて調整します。

Answer 2

。

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 3

あなたのpが十分な大きさではないので、ブレークが起こる行の前に分割。

pを十分に大きくするには、widthプロパティを設定する必要があります。 725pxはフォントサイズで動作するはずです。最初の行が小さい場合は破損します。 しかし、この解決策は反応しません。

.home-slider p { 
    width: 725px; 

最終的にフォントサイズも調整する必要があります。私は機能 "CSSをリセット" を使用し

Answer 4

;）：

* { 
    margin: 0; 
} 

<p>タグはマージンが