-2

I want to center align three links (anchor tags) I have in my page.

I've tried doing this in a css file:

a {
    text-align: center;
}

but it doesn't work, nor did I find anything about how this should be done.

this is my html:

<!DOCTYPE html>
    
<html lang="en">
    <head>
        <link href="styles.css" rel="stylesheet">
        <title>homepage</title>
    </head>
    <body>
        <h1 id="head_heading">This is a webpage about Thunder_Coder</h1>
        <p>You may have not known, but Thunder_Coder is mostly interested in two things: music and programming. <br>You may follow any of the links on the bottom to see more about Thunder_Coder, and about Thunder_Coders interests</p>
        <a class="text-center" href="music.html">Music</a>
        <a class="text-center" href="programming.html">Programming</a>
        <a class="text-center" href="about.html">About Thunder_coder</a>
    </body>
</html>
Thunder Coder
  • 104
  • 14
  • 1
    can you attach your html/css codesnippet you are trying? – wangdev87 Nov 26 '20 at 19:41
  • please explain what you want to achieve. – Can Nov 26 '20 at 19:47
  • @Can: I want to center align three links (anchor tags) I have in my page. – Thunder Coder Nov 26 '20 at 20:03
  • Seems like your'e new to Stack Overflow, welcome! Please share with us your HTML structure, why? It could be that your anchor tags are wrapped around other html tags but we dont know that, and thats important, why? Because hierarchy matters in HTML. Also depending on what your'e trying to achieve, that would give us a better understanding of the overall concept and context. – Eduardo Nov 26 '20 at 20:04

2 Answers2

0

We cannot change the style of an <a> tag, so we need to add <p>'s around them

<p> <a> </a> </p>

Then, you want to center the text.

<p style="text-align:center;"><a></a></p>

And then add our link and text.

<p style="text-align:center;"><a href="https://example.com">my text</a></p>
halfer
  • 19,824
  • 17
  • 99
  • 186
0

you need to add "text-align: center" to any parent tag in which the anchor tag is in.

if you have your anchor tags inside a div then add it to the div not the anchor tag.

example:

css:

    div{
        text-align: center;
    }

html:

<body>
    <div>
        <a href="#">this is a link</a>
    </div>
</body>
Tanish Surana
  • 117
  • 7