我該如何左對齊居中按鈕下的文本？

Question

我該如何左對齊按鈕下方的幫助文本？所需的功能是幫助集裝箱文本留下了按鈕的左側

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; 
} 

我試圖使按鈕的寬度父div的大小而是ISN對齊我的期望結果。我也試着加入.button-container和.help-container都圍繞一個div，但它需要父div的寬度

Answer 1

這裏我的解決方案使用Flexbox的

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

你可以把幫助容器到按鈕容器和使用CSS：

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

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