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>

如何将固定尺寸的按钮水平居中？

Answer 1

将text-align:center; CSS添加到<div>会使按钮居中。您还应该考虑将样式与内容分开，amongst other reasons可以减少重复。例如

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>

修改：official definition for text-align州：

text-align属性描述了块容器的内联级内容是如何对齐的

因此它会将所有内联级别元素居中，<input>是内联元素。

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>

Answer 3

将 text-align：center; 添加到您的主div＆amp;不需要使用内联css我们应该通过外部 CSS 文件定义css类，这里我们不需要任何类型的定位，我们可以通过简单的 CSS <轻松完成/ p>

**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

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>

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

4 个答案:

CSS

HTML