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;
}

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;
}

• javascript
• html
• hyperlink

• 2 text-align: center on the parent div – akerra Commented Dec 15, 2017 at 20:48
• well an inline element has no width so not sure how setting center on the element would make a difference. The element that contains that has a width needs to have the alignment set – epascarello Commented Dec 15, 2017 at 20:49

5 Answers 5

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>

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>

You can just do this:

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

<div class="center-text">
<a id="finall" href="sooce2.html">Link goes here</a>
</div>

wrap it inside a p element and assign the text-align:center; to the p element.

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

CSS

p {
   text-align: center;
}

Make sure no assignments that take precedence in the hierarchy are overriding it. margin-left: auto; and margin-right: auto; should work. None of the above solutions worked for my test error reproduction but those did.

If that still doesn't work, my default is always flexbox. It never fails me. Use display: flex; justify-content: flex-end;. To learn more about flexbox, visit this website: https://css-tricks./snippets/css/a-guide-to-flexbox/.