How to horizontally center a link element with CSS?

Question

Like the title said, how can I horizontally center the <a> element? Major bonus points for doing it with CSS only.

.center {
  text-align: center;
  align-self: center:
  margin: 0 auto;
}
.expander_link {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
  font-size: 100%;
  font-weight: bold;
  color: hotpink;
  text-align: center;
  align-self: center;
  text-decoration: none;
}

<h4 class="center">hello</h4>
<p>
  blah blah blah blah blah blah blah blah blah blah
</p>
<a id="link_1" href="3801" data="1" class="expander_link">center me horizontally</a>

You cannot use `align-self` without using `display: flex` on parent. — m4n0, Dec 10 '15 at 10:45

score 9 · Accepted Answer · edited Dec 13 '15 at 01:57

9

You should try like this-

  .center {
  text-align: center;
  /*align-self: center;*/
  margin: 0 auto;
}
.expander_link {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
  font-size: 100%;
  font-weight: bold;
  color: hotpink;
  text-align: center;
  align-self: center;
  text-decoration: none;
  display: block; 
}

<h4 class="center">hello</h4>
<p>
  blah blah blah blah blah blah blah blah blah blah
</p>
<a id="link_1" href="3801" data="1" class="expander_link">center me horizontally</a>

edited Dec 13 '15 at 01:57

A.L

10,259
10
67
98

answered Dec 10 '15 at 10:47

Mukul Kant

7,074
5
38
53

1

display: block was the part I was missing. It even made my padding work without overlap, which I also wanted. – William Jockusch Dec 10 '15 at 10:59

score 2 · Answer 2 · answered Dec 14 '15 at 15:30

To center an inline-level element, like <a>tag, I would suggest to wrap it into a block-level element, like <p> or <div> etc, then set p {text-align:center;}. See the simplest example follows:

p {
  text-align: center;
}

<p><a href="#">Center me horizontally</a></p>

If you want extra spacing around, simply add a {display:inline-block;} and set margin and padding values as needed, or set it on <p> tag.

p {
  text-align: center;
}
p a {
  display: inline-block;
  margin: 50px 0;
  padding: 10px;
  outline: 1px solid aqua;
}

<p><a href="#">Center me horizontally</a></p>

If you are not allowed to modify the markup, you could do the following. Note, the clickable area will be expanded, padding applies to. you might not want that. Run the demo to see.

a {
  display: block;
  text-align: center;
  margin: auto;
  
  padding-top: 50px;
  padding-bottom: 50px;
  outline: 1px solid aqua;
}

<a href="#">Center me horizontally</a>

To fix the unwanted spacing, you could do the display:table hack. It a combination of inline and block (shrink-to-fit and forces line break before/after features).

a {
  display: table;
  margin: 50px auto;
  padding: 10px;
  outline: 1px solid aqua;
}

<a href="#">Center me horizontally</a>

Of course, there are other ways, such as using flexbox, follow the other good answers to learn more about it.

score 1 · Answer 3 · answered Dec 10 '15 at 10:47

1

Try:

.expanded_link{
  display: block;
  text-align: center;
}

answered Dec 10 '15 at 10:47

KCarnaille

1,027
9
18

score 1 · Answer 4 · edited Dec 13 '15 at 01:56

1

try this

.expanded_link{
  display: block;
  text-align: center;
  text-decoration: none;
}

edited Dec 13 '15 at 01:56

A.L

10,259
10
67
98

answered Dec 10 '15 at 11:29

Sangita

31
5

score 0 · Answer 5 · answered Dec 12 '15 at 16:43

Use below css in .expander_link

width: 200px;
display: block;
margin-left: auto;
margin-right: auto;

So your class will be like this :

.expander_link {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
  font-size: 100%;
  font-weight: bold;
  color: hotpink;
  text-align: center;
  align-self: center;
  text-decoration: none;
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

It will centralize the <a> horizontally, and also it is responsive. So no matter what the size of the page, it will always make it horizontally centered.

Here is working fiddle.

How to horizontally center a link element with CSS?

5 Answers5