我该如何左对齐居中按钮下的文本？

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/