22

我对 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>

它只是将它们放在不同的行上。我相信这是因为<p>功能而发生的......但我只知道 HTML，我知道你可以用 CSS 做到这一点，但我想知道它是否可以只使用 HTML 来完成。

谢谢你的帮助！

4

8 回答 8

36

您的代码中有一些错误-第一个：您没有关闭您-p标签：

<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不是“功能”，但你是对的，这是导致问题的原因（因为它是块元素）
  • 您尝试使用的是css - 它只是内联而不是放置在单独的文件中，但您在这里不是在做“只是 HTML”
于 2010-11-29T09:37:17.580 回答
4

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

Listamatic 有一堆示例，说明如何设置链接列表的样式，包括一个数字，这些数字是垂直列表，每个链接都居中（这就是您所追求的）。它还有一个解释原理的教程。

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

于 2010-11-29T10:05:54.087 回答
3

你会把它们放在 a<p>或 a<div>

<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/

于 2010-11-29T09:37:54.710 回答
2

<p> 将显示在新行上。尝试将所有链接包装在一个 <p> 标记中：

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
于 2010-11-29T09:38:13.433 回答
0

一种解决方案是将它们放入内部<center>，如下所示：

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

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

于 2016-04-29T19:38:43.400 回答
0

p不是您将文本放入的方式a。那就是问题所在。唯一的解决方案是将文本放在 和<a>之间</a>。例如：

<a href="https://stackoverflow.com/posts/64201994/edit" style="text-align:center;">Stack Overflow</a>
于 2020-10-05T03:11:42.033 回答
-1

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

<a href:"#" style:"margin-left:"260px">Link</a>
于 2021-05-08T00:13:52.607 回答
-3

尝试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>
于 2015-10-06T16:44:15.113 回答