如何在 HTML 中居中链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4302386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center links in HTML
提问by yoshyosh
I am really new to HTML and was wondering how you center multiple links with html?
我对 HTML 真的很陌生，想知道如何将多个链接与 html 居中？
I have been trying :
我已经试了 ：
<a href="http//www.google.com"><p style="text-align:center">Search</a>
But the problem is when I try to put other links behind it for example:
但问题是当我尝试将其他链接放在后面时，例如：
<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>
It just places them on separate lines. I believe this is happening because of the <p>function...but I only know HTML, I know you can do it in CSS but I was wondering if it can be done using just HTML.
它只是将它们放在不同的行上。我相信这是因为<p>函数而发生的……但我只知道 HTML，我知道你可以用 CSS 来做，但我想知道是否可以只用 HTML 来完成。
Thanks for any help!
谢谢你的帮助！
回答by oezi
there are some mistakes in your code - the first: you havn't closed you p-tag:
您的代码中有一些错误 - 第一个：您没有关闭您p-tag：
<a href="http//www.google.com"><p style="text-align:center">Search</p></a>
next: pstands for 'paragraph' and is a block-element (so it's causing a line-break). what you wanted to use there is a span, wich is just an inline-element for formatting:
next:p代表“段落”并且是一个块元素（所以它会导致换行）。你想要使用的是一个span，它只是一个用于格式化的内联元素：
<a href="http//www.google.com"><span style="text-align:center">Search</span></a>
but if you just want to add a style to your link, why don't you set the style for that link directly:
但是如果您只想为链接添加样式，为什么不直接为该链接设置样式：
<a href="http//www.google.com" style="text-align:center">Search</a>
in the end, this would at least be correct html, but still not exactly what you want, because text-align:centercenters the text in that element, so you would have to set that for the element that containsthis links (this piece of html isn't posted, so i can't correct you, but i hope you understand) - to show this, i'll use a simple div:
最后，这至少是正确的 html，但仍然不完全是您想要的，因为该元素中text-align:center的文本居中，因此您必须为包含此链接的元素设置它（这段 html 不是已发布，所以我无法纠正您，但我希望您理解）- 为了说明这一点，我将使用一个简单的：div
<div style="text-align:center">
<a href="http//www.google.com">Search</a>
<!-- more links here -->
</div>
EDIT:some more additions to your question:
编辑：对您的问题还有一些补充：
pis not a 'function', but you're right, this is causing the problem (because it's a block-element)- what you're trying to use iscss - it's just inline instead of being placed in a seperate file, but you aren't doing 'just HTML' here
p不是一个“函数”，但你是对的，这导致了问题（因为它是一个块元素）- 您尝试使用的是css - 它只是内联而不是放置在单独的文件中，但您在这里不是在做“只是 HTML”
回答by Quentin
Since you have a list of links, you should be marking them up as a list (and not as paragraphs).
由于您有一个链接列表，您应该将它们标记为列表（而不是段落）。
Listamatic has a bunch of examples of how you can style lists of links, including a number that are vertical lists with each link being centred (which is what you appear to be after). It also has a tutorial which explains the principles.
Listamatic 有一堆示例说明如何设置链接列表的样式，包括一个数字，这些数字是垂直列表，每个链接都居中（这就是您所追求的）。它还有一个教程，解释了原理。
That part of the styling essentially boils down to "Set text-align: centeron an element that is displaying as a block which contains the link text" (that could be the anchor itself (if you make it display as a block) or the list item containing it.
样式的那部分本质上归结为“text-align: center在显示为包含链接文本的块的元素上设置”（这可能是锚点本身（如果您将其显示为块）或包含它的列表项。
回答by nonopolarity
you would put them inside a <p>or a <div>
你会把它们放在 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>
sample: http://jsfiddle.net/X8HM4/1/
回答by charliegriefer
The <p> will show up on a new line. Try wrapping all of your links in one single <p> tag:
<p> 将显示在新行上。尝试将所有链接包装在一个 <p> 标签中：
<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p>
回答by Ian David Bocioaca
One solution is to put them inside <center>, like this:
一种解决方案是把它们放在里面<center>，像这样：
<center>
<a href="http//www.google.com">Search</a>
<a href="Contact Us">Contact Us</a>
</center>
I've also created a jsfiddle for you: https://jsfiddle.net/9acgLf8e/
我还为您创建了一个 jsfiddle：https://jsfiddle.net/9acgLf8e/
回答by chris
Try doing a navelement with a ulelement. Mine has a mainabove but I don't think you need it.
尝试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>
The code is something like this.
When ever I put in the code it wouldn't work right so you need to fill in the blank,
then center it.
代码是这样的。
当我输入代码时，它无法正常工作，因此您需要填写空白，
然后将其居中。
main
nav
ul> li> a>: href="link of choice":name of link:/a>
