如何在固定大小的div中水平居中按钮？

Question

下面是代码，一个div中有两个按钮。

<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>

如何在固定大小的 div 中水平居中按钮？

- mahesh

---

你能再解释一下吗？这个按钮应该如何显示？ - Priyank Patel

Answer 1

在 <div> 中添加 text-align:center; 的 CSS 会将按钮居中。您还应该考虑将 样式 与 内容 分离，这可以减少重复，并且有其他原因可参考（维基百科）。例如：

CSS

div {
    position:relative;
    width:300px;
    height:30px;
    border:1px solid;
    text-align:center;
}

input {
    position:relative;
    width:70px;
    height:30px;
}

HTML

<div>
    <input type="button" value="ok"/>
    <input type="button" value="ok"/>
</div>

编辑： 官方定义 text-align 如下所述：

text-align 属性描述了块容器中内联级别内容的对齐方式。

因此，它将使 所有 内联级别元素居中，并且<input> 是一个内联元素。

- andyb

---

+1 让我理解了一个新的东西，但它到底是如何工作的？直到现在，我认为它只能用于 div 内部的文本。 - Priyank Patel

我已经编辑了我的答案，并解释了为什么 text-align:center 起作用 :-) - andyb

Answer 2

试试这个：

<div style="position:relative; width: 300px; height: 30px; border: 1px solid; text-align:center;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>

- dimmat

Answer 3

将text-align:center;应用于您的主div，不需要使用内联CSS，我们应该通过外部CSS文件定义CSS类，在这里我们不需要任何定位类型，我们可以通过简单的CSS轻松实现。

**CSS**

  div {
  width: 300px; 
  height: 30px; 
  border: 1px solid; 
  text-align:center;
  }
  .button {
   width: 70px; 
   height: 30px;
  }

HTML

<div>
<input type="button" value="ok" class="button">
<input type="button" value="ok" class="button">
</div>

示例：- http://jsbin.com/evomik/10/edit

- Shailender Arora

Answer 4

<div style="position:relative; width: 300px; height: 30px; border: 1px solid;">
<div id="button_container" style="margin-left:auto; margin-right:auto;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
<input type="button" value="ok" style="position:relative; width: 70px; height: 30px;">
</div>
</div>

- xholicka