如何使 HTML 中的链接居中

Question

我对 HTML 很陌生，想知道如何用 html 居中多个链接？

我一直在尝试：

  <a href="http//www.google.com"><p style="text-align:center">Search</a>

但问题是当我尝试将其他链接放在它后面时，例如：

 <a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p>

它只是将它们放在单独的行上。我相信这是因为

函数而发生的...但我只知道 HTML，我知道你可以在 CSS 中完成它，但我想知道是否可以仅使用 HTML 来完成。

感谢您的帮助！

Answer 1

您的代码中有一些错误 - 第一个：您还没有关闭 p -tag:

<a href="http//www.google.com"><p style="text-align:center">Search</p></a>

next: p 代表“段落”并且是一个块元素（所以它会导致换行）。您想要使用的是 span，它只是用于格式化的内联元素：

<a href="http//www.google.com"><span style="text-align:center">Search</span></a>

但如果您只想向链接添加样式，为什么不为其设置样式直接链接：

<a href="http//www.google.com" style="text-align:center">Search</a>

最后，这至少是正确的 html，但仍然不完全是您想要的，因为 text-align:center 将文本在该元素中居中，所以你必须为包含这个链接的元素设置它（这段html没有发布，所以我无法纠正你，但我希望你理解） - 要显示这一点，我将使用一个简单的 div：

<div style="text-align:center">    
  <a href="http//www.google.com">Search</a>
  <!-- more links here -->
</div>

编辑： 对您的问题进行一些补充：

• p 不是“函数”，但您是是的，这导致了问题（因为它是一个块元素）
• 您尝试使用的 is css - 它只是内联而不是放置在单独的文件中，但您没有这样做此处为“仅 HTML”

Answer 2

由于您有一个链接列表，因此您应该将它们标记为列表（而不是段落）。

Listamatic 有一堆关于如何设置链接列表样式的示例，其中包括一些垂直列表，每个链接都居中（这就是您所看到的）。它还具有解释原理的教程。

样式的这一部分本质上可以归结为“在显示为包含链接文本的块的元素上设置 text-align: center”（这可能是锚点本身（如果您将其设置为显示为块）或包含它的列表项。

Answer 3

您可以将它们放入

或

<p style="text-align:center">
    <a href="http//www.google.com">Search</a> 
    <a href="Contact Us">Contact Us</a>
</p>

示例中：http://jsfiddle.net/X8HM4/1/

Answer 4

将显示在新行上。尝试将所有链接包装在一个

中标签：

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>

Answer 5

一种解决方案是将它们放在

中，如下所示：

<center>
<a href="http//www.google.com">Search</a>
<a href="Contact Us">Contact Us</a>
</center>

我还为您创建了一个 jsfiddle：https://jsfiddle.net/9acgLf8e/

Answer 6

p 并不是将文本放入 a 中的方式。这就是问题所在。唯一的解决方案是将文本放在 和 之间。例如：

<a href="https://stackoverflow.com/posts/64201994/edit" style="text-align:center;">Stack Overflow</a>

Answer 7

好吧，一个非常简单的方法就是采用老式方法并通过使用来省去麻烦。
您可以按照您喜欢的方式更改左边距或右边距以及与像素的距离。

<a href:"#" style:"margin-left:"260px">Link</a>

Answer 8

尝试使用 nav 元素和 ul 元素进行操作。我的上面有一个 main 但我认为你不需要它。

<main>
<nav>
<ul><li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>
<li><a href="http//www.google.com">search</a>

代码是这样的。
当我输入代码时，它无法正常工作，因此您需要填写空白，
然后将其居中。

main
nav
ul> li> a>: href="link of choice":name of link:/a>