html - 在元素中居中放置多个链接

Question

请多多包涵。对编码很陌生。因此，我在一家公司工作，该公司对 SharePoint 进行了相当严格的限制，因此我无法在其上做很多事情。

我已使用脚本编辑器插入一些链接并使用 CSS 设置样式，但我似乎无法在保持空格和换行符的同时使它们水平居中。

有什么建议吗？

.button {
  background-color: tan;
  color: black;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  display: inline-block;
  border: 1px solid crimson;
  border-radius: 15px;
  margin: 4px 20px;
  height: 30px;
  width: 150px;
}

<a href="#" target="_blank" class="test">Link 1</a>
<a href="#" target="_blank" class="test">Link 2</a>
<a href="#" target="_blank" class="test">Link 3</a>
<a href="#" target="_blank" class="test">Link 4</a><br>
<a href="#" target="_blank" class="test">Link 5</a>
<a href="#" target="_blank" class="test">Link 6</a>
<a href="#" target="_blank" class="test">Link 7</a>
<a href="#" target="_blank" class="test">Link 8</a><br>
<a href="#" target="_blank" class="test">Link 9</a>
<a href="#" target="_blank" class="test">Link 10</a>
<a href="#" target="_blank" class="test">Link 11</a>
<a href="#" target="_blank" class="test">Link 12</a><br>
<a href="#" target="_blank" class="test">Link 13</a>
<a href="#" target="_blank" class="test">Link 14</a>
<a href="#" target="_blank" class="test">Link 15</a>
<a href="#" target="_blank" class="test">Link 16</a>

Answer 1

创建一个 div 将您的元素放在那里并将 text-align: center 应用于其父级 div 如下所示

.button {
  background-color: tan;
  color: black;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  display: inline-block;
  border: 1px solid crimson;
  border-radius: 15px;
  margin: 4px 20px;
  height: 30px;
  width: 150px;
}
.text-center{
 text-align: center;
}

<div class="text-center">
<a href="#" target="_blank" class="test">Link 1</a>
<a href="#" target="_blank" class="test">Link 2</a>
<a href="#" target="_blank" class="test">Link 3</a>
<a href="#" target="_blank" class="test">Link 4</a><br>
<a href="#" target="_blank" class="test">Link 5</a>
<a href="#" target="_blank" class="test">Link 6</a>
<a href="#" target="_blank" class="test">Link 7</a>
<a href="#" target="_blank" class="test">Link 8</a><br>
<a href="#" target="_blank" class="test">Link 9</a>
<a href="#" target="_blank" class="test">Link 10</a>
<a href="#" target="_blank" class="test">Link 11</a>
<a href="#" target="_blank" class="test">Link 12</a><br>
<a href="#" target="_blank" class="test">Link 13</a>
<a href="#" target="_blank" class="test">Link 14</a>
<a href="#" target="_blank" class="test">Link 15</a>
<a href="#" target="_blank" class="test">Link 16</a>
</div>