67

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>
1
  • 1
    I know it's old question but none of these alone really worked for me in Chrome. What did the job was 'text-align:center & display-block'. Hope it helps.
    – lsrom
    Commented Mar 30, 2016 at 8:27

14 Answers 14

107

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.

6
  • Thanks for showing both ways. I need this for a very restricted proprietary application that has limited html box functionality where I can't reference CSS :( so have to use the not recommended method
    – Davos
    Commented Jun 2, 2016 at 4:43
  • The text-align CSS property describes how inline content is aligned inside a block element. In this case the div is the block element and a is inline content. Commented Nov 16, 2016 at 22:57
  • adding "display: inline-block;" to the css above should help if you don't see any changes
    – rychrist88
    Commented Apr 6, 2018 at 21:38
  • I don't think it is a good idea to just change the display attribute without good reason. Commented Apr 13, 2018 at 14:22
  • @JaredMcAteer is valid change from .my-class { ... } to div, a {...} with the same body content? Commented Jul 13, 2023 at 17:21
20

write like this:

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

CSS

.parent{
  text-align:center
}
13

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;}
1
  • 1
    What are the different uses?
    – corbin
    Commented Apr 1, 2013 at 17:20
7

Try:

margin: 0 auto;
display: table
2
  • 1
    In many cases, that's the best answer as there is no additional markup needed. (like a parent div)
    – dash
    Commented Sep 6, 2019 at 8:32
  • 1
    It helped me. I don't want to have a container Commented May 3, 2020 at 23:20
5

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

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

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

1

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>
1

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.

1

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.

1

You can try this code:

/**code starts here**/

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

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

0

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>
-3

Just put it between center tags:

<center>><Your text here>></center>
3
  • 2
    In HTML5 <center> tag is not supported. Commented Mar 5, 2014 at 17:40
  • 2
    Do not follow this advice.
    – danchet
    Commented Mar 5, 2014 at 21:32
  • HTML encodes semantic meaning, not syntactic. In otherwords, HTML describes the data and is not meant to describe the layout and presentation. That's what CSS is for. If you have to ask yourself about how your website will look like, it's almost certainly a CSS related task. Early in the days of HTML mistakes were made and style orientated tags were introduced. As of HTML 5 most of them are deprecated (anyone remember <blink>?). <center> itself was deprecated pretty early on in HTML 4 IIRC.
    – CodeOcelot
    Commented May 6, 2016 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.