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

将text-align属性添加到body？

＆＃13;

<!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>

＆＃13;

Answer 2

在那里创建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>

将元素中的多个链接居中

2 个答案: