How to center a link in CSS?

Question

I have tried:

• text-align: center;
• margin: auto;
• margin-left: auto;
• margin-right: auto;

This is my code:

HTML:

<a id="final" href="sooce2.html"></a>

CSS:

#final {
   text-align: center;
}

Answer 1

anchor tags are an inline level element, therefore the things you have tried will not work.

either setting a { display: block; } with text-align: center;

or applying text-align: center; to its parent

.center-text {
  text-align: center;
}

a.center-text {
  display: block;
}

<div class="center-text">
<a href="#">Link goes here</a>
</div>


<a href="#" class="center-text">Link goes here</a>

Answer 2

By default a anchor elemenet is inline element and does not have defined width .. so you can make text inside centered if you either spefify it's width explicitly like XX px, or like my example where ) make it block element, and block elements default to be full width of it's parent.

a{
  display: block;
  text-align: center;
}

<a href="#">My link</a>