为什么这个按钮不对齐？

Question

CSS：

.button {

  color: black;
  background: lightblue;
  text-align: center;
    font-weight: bold;
  border: 1px solid blue;
}

.button:hover {
  color: #FFF;
  background: green;
}

HTML：

 <button class="button" type="submit" value="Submit"/>Submit</button>

我试图将button与中心对齐，但它没有发生。 这是因为我上过class还是什么？

我宁愿不使用课程，但我尝试了它也不会工作，所以我只是坚持上课，因为我发现我可以用它来hover 。

你能解释为什么我会使用button里面的type和value吗？ 我找到了这样的示例代码并将其复制了，但我不确定它是如何工作的。

Answer 1

用div标签包装你的按钮并为div提供对齐。

<div style="text-align:center">
    <button class="button" type="submit" value="Submit"/>Submit</button>
</div>

按钮输入有三种类型

按钮 ：只是一个按钮，不会导致任何事件发生。 所以，你必须自己提供活动。

提交 ：提交与其关联的表单。

reset ：清除与其关联的表单中的字段。

Answer 2

我只需使用display:block将按钮转换为Block Element。 这样我就可以使用margin属性，把它放在中心位置。 长和短，将这些代码行放在.button css代码中。

display:block;
margin:auto;

这是结果https://jsfiddle.net/p1q3xy00/14/

我真的不知道为什么有人会在按钮标签中使用值和类型属性。 实际上它们在input标签中用于指定元素的属性。 例如， value的作用类似于占位符，而type定义输入的格式。 它可以是复选框，电子邮件，密码，文本，日期，颜色等。

Answer 3

如果要将按钮与页面中心对齐，可以在其周围添加包装并将其置于中心

 .button { color: black; background: lightblue; text-align: center; font-weight: bold; border: 1px solid blue; } .button:hover { color: #FFF; background: green; } .wrapper { text-align:center; } 

 <div class="wrapper"> <button class="button" type="submit" value="Submit"/>Submit</button> <div> 

Answer 4

您只需将text-align:center添加到父元素即可

 body { text-align: center; } .button { color: black; background: lightblue; font-weight: bold; border: 1px solid blue; } .button:hover { color: #FFF; background: green; } 

 <button class="button" type="submit" value="Submit" />Submit</button> 

Answer 5

添加display: block; margin: 0 auto; display: block; margin: 0 auto; to .button使它成为一个块元素。

Answer 6

添加display: block to .button以便它可以识别margin