如何让SharePoint中Script Editor插入的链接水平居中并保留间距换行？

Hey there! I get it—working with restricted SharePoint permissions can feel like fighting with one hand tied behind your back. Let’s get those links centered while keeping your spacing and line breaks exactly how you want them. Here’s the step-by-step fix:

First, Fix the Class Name Mismatch #

Looking at your code, your CSS targets a class called .button, but your links use class="test". That’s why your button styles might not even be applying correctly! Let’s fix that first by making the class names match.

Step 1: Update Your CSS #

We’ll add a container style to handle centering, and make sure your button class matches what’s in your links. Here’s the adjusted CSS:

/* Container to center all links */
.link-container {
  text-align: center; /* Centers inline/inline-block elements inside */
  width: 100%; /* Ensures the container spans the full available width */
}

/* Your button styles (now matched to the link class) */
.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; 
}

Step 2: Wrap Your Links in the Container #

Put all your links inside a <div> with the link-container class. This will make sure they’re centered, while preserving your existing spacing and line breaks:

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

Why This Works #

• The link-container uses text-align: center, which tells all inline/inline-block elements inside it (your buttons) to line up in the center.
• Your margin: 4px 20px keeps the horizontal spacing between buttons, and the <br> tags preserve your line breaks exactly as you had them.
• The width: 100% on the container ensures it takes up the full width of the Script Editor web part, so centering works properly.

Quick Alternative for Super Restricted Environments #

If adding a new CSS class feels too risky, you can inline the container styles directly:

<div style="text-align:center; width:100%;">
  <!-- Your links here (with class="button") -->
</div>

That’s it! This should get your links centered without messing up the spacing or lines you’ve already set up.

内容的提问来源于stack exchange，提问作者Vinders88