テキストを中央揃えのボタンの下に配置する方法を教えてください。

Question

ボタンの下にヘルプテキストを配置する方法を教えてください。希望する機能は、私は、ボタンの幅親のdivのサイズが、そのISNを作ってみたボタン

JSFiddle

<div class="button-container"> 
    <button class="btn btn-primary"> 
    Login with Google 
    </button> 
    </div> 
    <div class="help-container"> 
    <ul> 
     <li>Because it's easier</li> 
     <li>Never forget your password!</li> 
    </ul> 
    </div> 

.button-container { 
    text-align: center; 
} 

の左側に合わせ左に助けコンテナテキストにあります私の望む成果はありません。私はまた、.button-containerと.help-container両方の周りのdivを追加しようとしましたが、それはあなたがにボタンコンテナを助け、コンテナを入れて、このCSSを使用することができ、親のdiv

Answer 1

私の解決策使用してフレキシボックス

CSS：

.container { 
    display : flex; 
    flex-direction : column; 
    align-items : center; 
} 

HTML：

<div class="container"> 
    <div class="button-container"> 
    <button class="btn btn-primary"> 
     Login with Google 
    </button> 
    <ul> 
     <li>Because it's easier</li> 
     <li>Never forget your password!</li> 
    </ul> 
    </div> 
</div> 

fiddle

Answer 2

の幅を取ります

.button-container { 
    margin: 0 auto; 
    width: 180px; 
} 
.help-container { 
    text-align: left; 
    overflow: visible; 
} 

ここで

https://jsfiddle.net/pyjkfxwx/1/