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

【问题标题】：How do I center or justify buttons in a div?如何在 div 中居中或对齐按钮？
【发布时间】：2014-09-26 14:47:04
【问题描述】：

我正在创建一个内部有一堆按钮的 div

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

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

【问题讨论】：

类似的东西？ jsfiddle.net/vd7xx你应该画个图来说明你需要什么
这样的？ stackoverflow.com/questions/24245616/…

标签： html css alignment

【解决方案1】：

使用这个，

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

【讨论】：

margin:auto 如果你不指定宽度将不会做任何事情
感谢您的建议，但它确实有效。
你可以检查这个：jsfiddle.net/L8u34... 使用和不使用 margin:auto。

【解决方案2】：

如果你需要垂直显示这个按钮，那么你可以使用 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>

【讨论】：

【解决方案3】：

您可以使用 CSS 属性

text-align: center;

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

【讨论】：

【解决方案4】：

只需使用 text-align:center

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

问候， Nimesh P.

【讨论】：

【解决方案5】：

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

它会做......

【讨论】：

【解决方案6】：

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

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

和css

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：