如何将 link 对齐到 html 和 css 的中心？

Question

我想将页面中的三个链接（锚标签）居中对齐。

我试过在 css 文件中这样做：

a {
    text-align: center;
}

但它不起作用，我也没有找到任何有关如何完成此操作的信息。

这是我的 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>

Answer 1

我们无法更改 <a> 标签的样式，因此我们需要添加 <p> 的他们周围

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

然后，您希望文本居中。

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

然后添加我们的 link 和文本。

<p style="text-align:center;"><a href="https://example.com">my text</a></p>

Answer 2

您需要将“text-align: center”添加到锚标签所在的任何父标签。

如果您的锚标签位于 div 中，则将其添加到 div 而不是锚标签。

示例：

css:

    div{
        text-align: center;
    }

html:

<body>
    <div>
        <a href="#">this is a link</a>
    </div>
</body>

如何将 link 对齐到 html 和 css 的中心？

How can I align a link to the center in html and css?

html

css

alignment

hyperlink