javascript - How to center a link in CSS? - Stack Overflow

admin管理员组

文章数量:1341459

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

Share Improve this question Follow edited Dec 15, 2017 at 21:14 user2314737 29.5k2020 gold badges107107 silver badges123123 bronze badges asked Dec 15, 2017 at 20:47 Conlan RyanConlan Ryan 5911 gold badge33 silver badges99 bronze badges 2

• 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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/.

本文标签： javascriptHow to center a link in CSSStack Overflow