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

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>

Answer 2

尝试将按钮放在另外的DIV中并应用这些样式：

form {
    background-color: green;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
}

form div button {
   display: block;
   width: 100%;
}