3

What am I doing wrong when trying to center this a tag?

I cannot apply the text-align property to an anchor tag, but i can apply it to paragraph, div, and other tags.

My HTML code is as follows

<!DOCTYPE html>
<html>
<head>
        <title>Centering An A Tag</title>
        <link="theme.css" rel="stylesheet" type="text/CSS">
</head>
<body>
    <a href="https://www.example.com" id="Link1">
            Link To example.com
    </a>
</body>
</html>

My CSS code is as follows

#Link1{
    text-align: center;
}

I also cannot use the margin-left:auto; margin-right:auto; method.

I am using Google Chrome if that matters.

corn on the cob
  • 2,093
  • 3
  • 18
  • 29
  • 2
    It is an inline element by default. You can either give it `display: block` or wrap it in a container that’s centre-aligned. But… don’t you want your account deleted? That might defeat the point of asking questions. – Ry- Jun 25 '14 at 03:57
  • As @false said - [**JSFiddle Example**](http://jsfiddle.net/vkM7W/) – Darren Jun 25 '14 at 03:59
  • nice little article that describes the differences between inline elements and block elements in regards to centering: http://forum.webflow.com/t/how-to-center-elements/2632 – bennett_an Jun 25 '14 at 04:02
  • Thanks And Yes I Want To Create A New Account But Since I Haven't Created A New Account Yet I Just Used This One –  Jun 25 '14 at 04:03
  • Does this answer your question? [how to center an inline div using css?](https://stackoverflow.com/questions/3654399/how-to-center-an-inline-div-using-css) – Heretic Monkey Sep 14 '20 at 18:49

4 Answers4

7

There you go http://jsfiddle.net/mrodriguezr/AEF3L/

#Link1{
    text-align: center;
    display:block;
}
Melvinr
  • 514
  • 2
  • 8
0

Add display:block;text-align:center

Will surely work

Kaustav Banerjee
  • 114
  • 1
  • 4
0

A tags are inline, so they only occupy the space of their contents, padding, margin, etc. BLock levels on the other hand take up their entire parent container's width by default. In your case, I'd suggest wrapping your link in a <div/> and setting text-align: center; on the div. I suppose you could also center it in the body tag. I would set the a tag css to display: inline-block; and the container's css to display:block; text-align: center;

EDIT: note that setting margin, padding on inline element may not behave as you expect, which is why I suggested the display: inline-block bit.

Todd
  • 5,314
  • 3
  • 28
  • 45
0

You can also center an anchor tag by using the bootstrap grid system. Here is an example.

<div class="row">
    <div class="col-md-12 text-center">
        <a href="#Process" class="btn  btn-sm px-3 mt-5 text-white text-center"
            style="background-color:rgb(50, 75, 114);border-radius:20px;">
            Get Started
        </a>
    </div>
</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
hamza ahmed
  • 1
  • 1