Centering numerous links in an element

Question

Please bear with me. Quite new to coding. So I work for a company that have quite a locked down SharePoint so I cannot do alot on it.

I've used a Script Editor to insert some links and styled them with CSS but I cannot seem to get them horizontally centred whilst keeping spaces and line breaks.

Any advice?

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

can you elaborate more ? is it simply text alignment ? or the whole block ? — Temani Afif, Jan 10 '18 at 15:21
It's the whole block. The links are all spaced correctly and text aligned center but just not centred in the element. All of the suggestions below seem to center them but they lose all of the rest of the css styling and spacings. — Vinders88, Jan 10 '18 at 15:24
"All of the suggestions below seem to center them but they lose all of the rest of the css styling and spacings" - What styling?? — sol, Jan 10 '18 at 15:26
what do you mean by they lose all the rest ? nothing is lost, they simply added center — Temani Afif, Jan 10 '18 at 15:26
@sol i think i got it ... he specified a CSS style and applied wrong class name :/ — Temani Afif, Jan 10 '18 at 15:28
As in as soon as I amend the code to add in the center, they just become underlined links and do not look like link buttons. Do not have colors or borders or nothing. — Vinders88, Jan 10 '18 at 15:28
check well your code and you will see that you applied wrong class name — Temani Afif, Jan 10 '18 at 15:29
Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — Temani Afif, Jan 10 '18 at 15:30
When I try it on jsfiddle it works perfect but for some reason as soon as I enter the code on the SharePoint site it still doesn't center across the while column. — Vinders88, Jan 10 '18 at 15:35

sol · Answer 1 · 2018-01-10T15:29:10.257

Add text-align property to 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>

you think it's only text-align center ? so no need to complicated like i did :p .. in this case i would probably flag as duplicate — Temani Afif, Jan 10 '18 at 15:19
Based on the initial markup (before question was edited) and OP asking to 'horizontally center'... I think `text-align` may be reasonable. — sol, Jan 10 '18 at 15:25

score 0 · Answer 2 · answered Jan 10 '18 at 15:15

Create a div put ur elements there and apply text-align: center to its parent div like below

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

Centering numerous links in an element

2 Answers2