html - 如何在 div 中居中或对齐按钮？

Question

我正在创建一个里面有一堆按钮的 div

<div>
    <button>a</button><button>b</button>
</div>

我希望按钮在 div 中显示为对齐或居中。将有几行按钮，它们本质上应该看起来像文本，但居中/对齐。

Answer 1

如果您需要垂直显示此按钮，那么您可以使用 flex-direction: column; 或者使用 flex-direction: row; 来水平显示。并将此属性添加到您的代码中。

div{
  position:relative;
  display:flex;
  flex-direction: column;
  flex-wrap:wrap;
}

button{
  display:block;
  padding:1rem 2rem;
  background:#d0333a;
  margin-bottom:.5rem;
  text-align:center;
  border: none;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
}

<div>
  <button>a</button><button>b</button><button>c</button><button>d</button>
</div>