[html] How do I center an anchor element in CSS?

I just want to have my anchor in the middle of the screen horizontally, how might I do this?

<a href="http://www.example.com">example</a>

This question is related to html css

The answer is


Just put it between center tags:

<center>><Your text here>></center>

css cannot be directly applied for the alignment of the anchor tag. The css (text-align:center;) should be applied to the parent div/element for the alignment effect to take place on the anchor tag.


Try

margin: 0 auto;
display:table

Hope that helps somebody out.


try to wrap a div around and add these styles to the div:

 width: 100%; 
 text-align:center;

You can try this code:

/**code starts here**/

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

Two options, that have different uses:

HTML:

<a class="example" href="http://www.example.com">example</a>

CSS:

.example { text-align: center; }

Or:

.example { display:block; width:100px; margin:0 auto;}

By default an anchor is rendered inline, so set text-align: center; on its nearest ancestor that renders as a block.


write like this:

<div class="parent">
 <a href="http://www.example.com">example</a>
</div>

CSS

.parent{
  text-align:center
}

<span style="text-align:center; display:block;">
<a href="http://news.awaissoft.com">Awaissoft</a>
</span>

style="margin:0 auto; width:auto;" Try that.


I think you can't do that with inline elements like anchor, span. But to make it work you have to set the display to block.

<a href="http://www.example.com" style="text-align:center;display:block;">example</a>

There are many ways.

<!-- Probably the most common: -->
<div style="text-align: center;"><a href="...">Link</a></div>

<!-- Getting crafty... -->
<a href="..." style="display: block; text-align: center;">Link</a></div>

There are probably other ways too, but these three are probably the most common.