Question

我无法集中我的按钮，不知道为什么它不起作用。

这里是html和CSS。

.button {
  margin:auto;
  display: inline-block;
  height: 100px;
  width: 300px;
  background: #00007f;
  border: 2px solid rgba(192, 192, 192, 0.59);
  border-radius: 50px;
  padding: 15px 20px;
  color: rgba(172, 172, 172, 0.55);
  font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  box-shadow:0 4px 0 #ACACAC;
}

a.button {
  text-decoration: none;
}

<a href="blabla.html" class="button"  style= "text-align: center"> Start Game</a>

Answer 1

在包含按钮组

的父上

text-align: center;

像：

.button {
  white-space: nowrap;
  display: inline-block;
  background: #00007f;
  border: 2px solid rgba(192, 192, 192, 0.59);
  border-radius: 50px;
  padding: 15px 40px;
  color: rgba(172, 172, 172, 0.55);
  font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  box-shadow:0 4px 0 #ACACAC;
}

a.button {
  text-decoration: none;
}

/* HELPER CLASSES:*/
.text-center{text-align:center;}

<p class="text-center">
  <a href="blabla.html" class="button"> Start Game</a>
</p>

从您的按钮中移除宽度和高度 - 将使事情变得更容易。

Answer 2

以不同方式对内嵌元素和块元素进行居中。

在您的情况下，您尝试使用margin: auto用于居中块元素，但您将按钮设置为inline-block。只需将按钮更改为display: block，即可完成所有操作。

.button {
  margin:auto;
  display: block;
  height: 100px;
  width: 300px;
  background: #00007f;
  border: 2px solid rgba(192, 192, 192, 0.59);
  border-radius: 50px;
  padding: 15px 20px;
  color: rgba(172, 172, 172, 0.55);
  font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  box-shadow:0 4px 0 #ACACAC;
}

a.button {
  text-decoration: none;
}

<a href="blabla.html" class="button"  style= "text-align: center"> Start Game</a>

使用css将按钮居中

2 个答案: