Working JSFiddle

Question

由于某种原因，以下代码不会导致定制的输入按钮居中（标有“Click Me”的按钮），但默认按钮（“Submit”）居中。

form{
    text-align : center;
}
.button2{
    display: block;
    height: 100px;
    width: 300px;
    text-align: center;
}

<form method="post">
        {% csrf_token %}
        {{ form.as_p }}        
        <div class="buttonHolder">
            <button type="submit">Submit</button>
            <input class="button2" type="submit" value="Click Me"/>
        </div>
</form>

是什么导致这种情况发生？这个HTML文件正在Python / Django项目中运行，如果这有所不同的话。谢谢你的帮助。

Answer 1

Working JSFiddle

只需将margin: 0 auto;添加到您的CSS中即可。

完整CSS

form {
    text-align : center;
}
.button2 {
    display: block;
    height: 100px;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

Answer 2

看到你已经得到了答案，即

form {
    text-align : center;
}
.button2 {
    display: block;
    height: 100px;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

使用保证金：0自动;但是我仍然想解释它为什么会发生。

提交按钮位于中心但第二个按钮没有。

<强>原因：

默认情况下，按钮和输入类型的边距均为0 em。因此，当您将text-align：center应用于表单时，按钮和输入都将显示在中心。

现在您想将display：block添加到第二个按钮。一旦你这样做，元素将采用整个宽度，元素内容后面的空格将作为边距。此边距允许您的按钮移动到块的左侧。现在为了抵消这个保证金，你需要添加属性：保证金：0自动; 即顶部和底部将有0px保证金（你改变多少你想要的），左右边距将是自动的调整后会使你的元素成为中心。

最后的想法：

始终记得使用display：block属性向元素添加自定义边距以覆盖默认边距。

Answer 3

问题是您的按钮是从表单标记上的text-align:center;声明继承text-align:center;。

将此添加到您的CSS

.buttonHolder { 文本对齐：左; }

＆＃13;

form {
  text-align: center;
}
.button2 {
  display: block;
  height: 100px;
  width: 300px;
  text-align: center;
}
.buttonHolder {
  text-align: left;
}

＆＃13;

<form method="post">
  {% csrf_token %} {{ form.as_p }}
  <div class="buttonHolder">
    <button type="submit">Submit</button>
    <input class="button2" type="submit" value="Click Me" />
  </div>
</form>

＆＃13;

请告诉我，如果我没有正确理解这个问题，我会修改我的答案：）

Answer 4

使用以下样式“点击我”按钮

margin: 0 auto;

这意味着

top and bottom margins are 0
right and left margins are auto

Answer 5

只需将以下样式添加到.button2

即可

.button2 {
display: table;
    margin: 0 auto;
}

按钮不以HTML表格为中心

5 个答案:

Working JSFiddle

完整CSS