見出しが1行以上の場合に見出しが中央揃えにならない

Question

フレックスボックスを使用して中央揃えになっているタイトルとサブタイトルのヘッダーがあり、背後に白い背景があります。背景は、テキスト自体と同じ幅でなければなりません。タイトルとサブタイトルの両方が十分な場合は正常に動作しますが、サブタイトルが1行より長い場合は分割が開始されます。

.entry-title-wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    background-color: rgba(255,255,255,0.7); 
 
    padding: 6px 12px; 
 
    margin: auto; 
 
    border-radius: 2px; 
 
    h1 { font-size: 48px; } 
 
    h2 { font-size: 32px; } 
 
}

<header class="entry-header"> 
 
    <div class="entry-title-wrap"> 
 
    <h1 class="entry-title">Nick Dourado</h1> 
 
    <h2 class="entry-subtitle">If the title is longer than one line so that it breaks over the line it makes the whole box way too big.</h2> 
 
    </div> 
 
</header>

とすぐに字幕が複数行に長い画面幅とブレークよりように、それを含むH2タグは、白色をプッシュコンテナの全幅に展開縁も背景になる。また、フレックスボックスのスタイリングのために、中心に置く必要がありますが、text-align: center;イベントを追加しない限り、テキストをh2の左に揃えます。

ホワイトボックスをテキストの幅に制限し、h2がコンテナの幅に拡大しないようにするにはどうすればよいですか？可能であれば、一度に1単語ではなく、テキストの途中で字幕が壊れるようにして、すべての行が同じ長さになるようにします。

Here it is in CodePen.字幕文を短くすると、はになるはずです。

これは、それがためだウェブサイトの古いバージョンである：フレックスと中央にブロック要素を整列http://theartsabstract.ca/post/151891941177/nick-dourado-on-halifaxs-improvised-music-scene

Answer 1

は見出しにテキストアラインセンターを使用するのと同じではありません。そこで、text-align:centerを追加してください。

他にもいくつか変更が加えられました。

• 削除画像ではなく、背景として
• 設定された画像をアンダーレイ、そしてあなたの白いボックスは限りエッジ

に当たらないよう

を「カバー」に設定サイズ は、いくつかのパディングを追加しました途中でテキストを折り返して、テキストを折り返し始めるときのメディアクエリを設定し、CSSの最大幅で見出しを更新する以外に、これを行う方法はわかりません。

http://codepen.io/anon/pen/kkdgjX?editors=1100

Answer 2

ないあなたが求めているものを完全に確認してください下にCodePenを参照してください、しかし、あなただけの見出しを中央に探している場合は、すべてのでフレックスを使用する必要はありません。さて、垂直整列のためにフレックスを使用する必要があります。それを追加しました。ここに編集codepenです：。http://codepen.io/anon/pen/NRVdBQ?editors=1100#0

CSS

.entry-header { 
    display: flex; 
    justify-content: center; 
    height: 340px; 
} 
.entry-title-wrap { 
    background-color: rgba(255,255,255,0.7); 
    padding: 6px 12px; 
    margin: auto; 
    border-radius: 2px; 
    max-width: 20em; 
} 
h1 { text-align: center; 
    font-size: 48px; } 
h2 { font-size: 32px; 
    text-align: justify; 
    text-align-last: center;; 
} 

div.post-thumb-banner { 
    display: flex; 
    align-items: center; 
    position: absolute; 
    height: 340px; 
    width: 100%; 
    overflow: hidden; 
    img { 
    width: 100%; 
    height: auto; 
    } 
    z-index: -10; 
} 

HTML

<div class="post-thumb-banner"> 
    <img width="4795" height="3460" src="http://media2.fdncms.com/thecoast/imager/u/original/5056558/dsc_5435_1_.jpg" /> 
</div> 

<header class="entry-header"> 
    <div class="entry-title-wrap"> 
    <h1 class="entry-title">Nick Dourado</h1> 
    <h2 class="entry-subtitle"><i>If the title is a lot longer than it should be it should just wrap properly as this.</i></h2> 
    </div> 
</header> 

Answer 3

text-align: center;.entry-title-wrap h2へ

これは本当にクールですhttp://codepen.io/anon/pen/dpEvbj?editors=1100#0