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>

Answer 2

您可以使用CSS属性

text-align: center;

这可用于居中所有内联元素，如按钮，文本等...

Answer 3

使用此，

<button style="margin: 0 auto; display: block;">a</button>
<button style="margin: 0 auto; display: block;">b</button>

Answer 4

只需使用text-align：center

<div style="text-align:center">
    <button>a</button><button>b</button>
</div>

此致 Nimesh P。

Answer 5

<style>
div{
   text-align: center;
}
</style>

它会......

Answer 6

如果你有按钮作为块元素或任何其他块元素，你可以这样做：

<div class="container">
    <button>button</button>
</div>

和css

.container { width: 100%;}
.container button { display: block; margin: 0 auto;}

Answer 7

<强> Demo

HTML

<div>
    <button>a</button><button>b</button><button>c</button><button>d</button><button>e</button><button>f</button><button>g</button><button>h</button>
</div>

CSS

div{
    text-align: center;
}
button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

Answer 8

要水平和垂直居中对齐按钮，请将以下内容应用于父div

HTML

<div id = "parent_div">
 <button>a</button>
 <button>b</button>
 <button>c</button>
</div>

CSS

#parent_div {
 width:200px;
 height:200px;
 border:solid 1px blue;
 display:flex;/*Requires vendor prefixes*/
 justify-content:center;/*Requires vendor prefixes*/
 align-items:center;/*Requires vendor prefixes*/
}

DEMO

删除justify-content和align-items以删除垂直和水平对齐。

阅读本文：FLEX

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

8 个答案: