画像の中にw/txtの境界を揃えるのに問題がある

Question

タイトルは検索しようとしましたが、背景の中にテキストを入れるために枠内にテキストを入れることはできません。現時点では、中心に置かれていますが、トップに固執しています（意味がある場合）。事前に助けを

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

ありがとう！

Answer 1

display: flex;~bannerクラスを追加します。またbanner-content IDにdisplay: inline-flexを追加します。

：としてここに：あなたはあなたのスタイルにこのコードを追加し、画面が小さいときの言葉は国境から出てきたしたくない場合は

を編集

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

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