Question

如何在按钮下左对齐帮助文字？所需的功能是帮助容器文本左侧与按钮的左侧对齐

  <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的大小，但这不是我想要的结果。我还尝试在.button-container和.help-container周围添加div，但它占用了父div的宽度

Answer 1

您可以将帮助容器放入按钮容器中并使用此CSS：

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

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

Answer 2

这是我使用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

如何在居中按钮下保留对齐文本？

2 个答案: