迹忆客 专注技术分享

本文将教我们将一个或多个 HTML 链接居中。 在 HTML 中，我们可以使用 <a> 标签来创建链接并将 URL 分配给 src 属性。

使用 <center> HTML 标记将多个 HTML 链接居中

在 HTML 中使元素居中的最简单方法是 <center> 标记。 我们可以把所有的元素都放在 <center> </center> 标签里面，我们需要显示在中心。

例如，我们创建了四个链接并将它们插入到 <center> 标记内以在中心呈现。

HTML 代码：

<center>
    <a  href="#">About Us</a>
    <a  href="#">Contact Us</a>
    <a  href="#">HTML</a>
    <a  href="#">CSS</a>
</center>

在上面的输出中，用户可以看到所有链接都出现在网页的中间。

使用 text-align: center CSS 属性将多个 HTML 链接居中

我们还可以使用 CSS 的文本对齐属性将 HTML 元素居中。

在下面的示例中，我们创建了四个链接并将它们添加到 <div> 元素中。 接下来，我们将 text-align: center CSS 属性应用于 <div> 元素，这将使所有 <div> 元素居中。

HTML 代码：

<div>
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a>
</div>

CSS 代码:

div{
    text-align: center;
}

如果用户想在单个列中逐行显示所有链接，他们可以为 <div> 元素的样式添加 display:flex 和 flex-direction:column CSS 属性。

HTML 代码：

<div>
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a>
</div>

CSS 代码:

div{
    display: flex;
    flex-direction: column;
    text-align: center;
}

在上面的输出中，用户可以观察到所有链接都出现在一列中，并且该列出现在屏幕中央。