请多多包涵。编码很新。所以我为一家拥有相当严格的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>创建一个div将ur元素放在那里并将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>将text-align属性添加到body？
<!DOCTYPE html>
<html>
<head>
<style>
.test {
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;
}
body {
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>