Probleme beim Zentrieren eines Randes mit Text innerhalb eines Bildes

Question

Wie der Titel sagt, habe ich versucht, zu suchen, aber ich kann nicht einen Rand w/Text innerhalb davon erhalten, um innerhalb eines Hintergrundbildes zu zentrieren. Ab jetzt zentriert es sich nur, bleibt aber an der Spitze (wenn das Sinn macht).

.banner { 
 
    background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg"); 
 
    background-size: cover; 
 
    background-position: bottom center; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
#banner-content { 
 
    border: 1px solid #FFF; 
 
    margin: auto; 
 
    text-align: center; 
 
    width: 40%; 
 
}

<div class="banner"> 
 
    <div id="banner-content"> 
 
     <h1>Random misc text for the purpose of practicing</h1> 
 
    </div> 
 
    </div>

Danke für die Hilfe im Voraus!

Answer 1

Hinzufügen display: flex; zu banner Klasse; Fügen Sie auch display: inline-flex zu Ihrer banner-content ID hinzu. Wie hier:

.banner { 
 
    background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg"); 
 
    background-size: cover; 
 
    background-position: bottom center; 
 
    height: 400px; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
#banner-content { 
 
    border: 1px solid #FFF; 
 
    margin: auto; 
 
    text-align: center; 
 
    width: 40%; 
 
    display: inline-flex; 
 
}

<div class="banner"> 
 
    <div id="banner-content"> 
 
     <h1>Random misc text for the purpose of practicing</h1> 
 
    </div> 
 
    </div>

Herausgegeben

Wenn Sie Wörter aus Grenze nicht wollen, kam, wenn der Bildschirm klein ist, diesen Code zu Ihrem Stil hinzufügen:

.banner h1{ 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -ms-word-break: break-all; 
    word-break: break-all; 
    word-break: break-word; 
}