Überschrift wird nicht zentriert, wenn länger als eine Zeile

Question

Ich habe eine Kopfzeile mit einem Titel und einem Untertitel, die beide mit flexbox zentriert sind, und hinter ihnen einen blassen weißen Hintergrund haben. Der Hintergrund sollte nur so breit sein wie der Text selbst, was gut funktioniert, wenn sowohl der Titel als auch der Untertitel kurz genug sind, aber abbrechen, wenn der Untertitel länger als eine Zeile ist.

.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>

Sobald der Untertitel ist länger als die Bildschirmbreite und bricht auf mehr als eine Zeile, die h2-Tag es enthält, erweitert auf die volle Breite des Behälters, der den weißen schiebt Hintergrund auch an den Rändern. Es richtet auch den Text links von der h2 aus, es sei denn, ich füge das Ereignis text-align: center; hinzu, obwohl es aufgrund des Flexbox-Designs zentriert sein sollte.

Wie kann ich die weiße Box auf die Breite des Textes beschränkt halten und verhindern, dass sich die h2 auf die Containerbreite ausdehnt? Wenn es mir möglich ist, würde ich es auch gerne erzwingen, dass der Untertitel in der Mitte des Textes bricht und nicht ein Wort nach dem anderen, so dass alle Zeilen mehr oder weniger die gleiche Länge haben.

Here it is in CodePen. Sie können sehen, wie es sollte aussehen, wenn Sie den Untertitel Satz kürzer machen.

Dies ist die alte Version der Website für es ist: http://theartsabstract.ca/post/151891941177/nick-dourado-on-halifaxs-improvised-music-scene

Answer 1

Aligning Blockelemente in der Mitte mit flex ist nicht die gleiche text-align Zentrum auf Schriften als verwenden. Also gehen Sie voran und fügen Sie die text-align:center auf ihnen hinzu.

Ich machte auch ein paar andere Änderungen.

• entfernt Bild Unterlags
• Set Bild als Hintergrund statt, und legen Sie Größe zu "bedecken"
• hinzugefügt einige padding so Ihre weißen Kasten getroffen Rand nicht

Soweit der Textumbruch in der Mitte, bin ich nicht sicher von irgendeiner Möglichkeit, dies zu tun, neben einer Medienabfrage für, wenn der Text beginnt zu umbrechen, und aktualisieren Sie dann die Überschrift mit einer maximalen Breite in CSS. Siehe CodePen unten

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

Answer 2

Nicht ganz sicher, was Sie fragen, aber wenn Sie schauen, nur die Überschriften zum Zentrum, gibt es keine Notwendigkeit, flex zu verwenden, an allen. Okay, Flex muss für die vertikale Ausrichtung verwendet werden. Hinzugefügt es in hier eine editierte 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

hinzufügen text-align: center; zu .entry-title-wrap h2

http://codepen.io/anon/pen/dpEvbj?editors=1100#0