CODEWITHSUNDEEP
htmlcss
Shai UI
Shai UI

Reputation: 51918

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>

Upvotes: 68

Views: 204449

Answers (14)

clem
clem

Reputation: 3366

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

 width: 100%; 
 text-align: center;

Upvotes: 5

Eric K
Eric K

Reputation: 716

Try:

margin: 0 auto;
display: table

Upvotes: 7

JaredMcAteer
JaredMcAteer

Reputation: 22536

Add the text-align CSS property to its parent style attribute

Eg:

<div style="text-align:center">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

Or using a class (recommended)

<div class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

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

See below working example:

.my-class {
  text-align: center;
  background:green;
  width:400px;
  padding:15px; 
}
.my-class a{text-decoration:none; color:#fff;}
<!--EXAMPLE-ONE-->
<div style="text-align:center; border:solid 1px #000; padding:15px;">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

<!--EXAMPLE-TWO-->
<div class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

Q: Why doesn't the text-align style get applied to the a element instead of the div?

A: The text-align style describes how inline content is aligned within a block element. In this case, the div is a block element and it's inline content is the a. To further explore this consider how little sense it would make to apply the text-align style to the a element when it is accompanied by more text

<div>
  Plain text is inline content. 
  <a href="http://www.example.com" style="text-align: center">example</a> 
  <span>Spans are also inline content</span>
</div>

Even though there are line breaks here all the contents of div are inline content and therefore will produce something like:

Plain text is inline content. example Spans are also inline content

It doesn't make much sense as to how "example" in this case would be displayed if the text-align property were to be applied.

Upvotes: 107

Honnappa
Honnappa

Reputation: 61

It is very Simple Anchor(a) is a inline element, it means width of inline element is equal to how much text width is there that much.so if you want horizontal center so you need to convert inline to block element, then add text align center.

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

Upvotes: 0

Saravanan Kasi
Saravanan Kasi

Reputation: 696

You can try this code:

/**code starts here**/

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

Upvotes: 1

Awaissoft
Awaissoft

Reputation: 41

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

Upvotes: 3

Reploy94
Reploy94

Reputation: 23

Just put it between center tags:

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

Upvotes: -3

Chandan Gorapalli
Chandan Gorapalli

Reputation: 343

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.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

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.

Upvotes: 1

VJAI
VJAI

Reputation: 32758

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>

Upvotes: 1

bookcasey
bookcasey

Reputation: 40453

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

Upvotes: 13

sandeep
sandeep

Reputation: 92803

write like this:

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

CSS

.parent{
  text-align:center
}

Upvotes: 20

RSM
RSM

Reputation: 15108

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

Upvotes: 0

Quentin
Quentin

Reputation: 943527

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

Upvotes: 2

Related Questions