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。

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

Answer 1

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

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

按钮输入有三种类型

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

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

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

Answer 2

我只想使用display:block将按钮转换为块元素。这样我就可以使用 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添加到父元素

即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

将display: block; margin: 0 auto;添加到.button，使其成为块元素。

Answer 6

将display: block添加到.button，以便它可以识别margin

为什么这个按钮不对齐？

6 个答案: