html - 如何在列中制作两个按钮？

Question

如何在一列和中心制作两个按钮？ 我尝试使用 flexbox，但是当我添加 flex-direction:column 时，它会使按钮的宽度变为 100% 我需要这样

HTML

<form>
  <button type="button">Regulamin</button>
  <button type="button">Formularz kontaktowy</button>
</form>

CSS

form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 20px;
}

Answer 1

实现此目的的一种方法是为按钮指定 width 并通过 margin: 0 auto 将其居中。

form button {
    width: 100px;
    margin: 0 auto;
}

要使用的示例片段:

form {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 20px;
}
form button {
  width: 100px;
  margin: 0 auto;
}

<form>
  <button type="button">Regulamin</button>
  <button type="button">Formularz kontaktowy</button>
</form>