Html 如何在 CSS 中居中定位锚元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9721831/
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 do I center an anchor element in CSS?
提问by foreyez
I just want to have my anchor in the middle of the screen horizontally, how might I do this?
我只想将我的锚点水平放置在屏幕中间，我该怎么做？
<a href="http://www.example.com">example</a>
回答by JaredMcAteer
Add the text-aligncss property to its parent style attribute
将text-aligncss 属性添加到其父样式属性
Eg:
例如：
<div style="text-align:center">
<a href="http://www.example.com">example</a>????????????????????????????????????
</div>?
Or using a class (recommended)
或者使用类（推荐）
<div class="my-class">
<a href="http://www.example.com">example</a>????????????????????????????????????
</div>?
.my-class {
text-align: center;
}
See below working example:
请参阅以下工作示例：
.my-class {
text-align: center;
background:green;
width:400px;
padding:15px;
}
.my-class a{text-decoration:none; color:#fff;}<!--EXAMPLE-ONE-->
<div style="text-align:center; border:solid 1px #000; padding:15px;">
<a href="http://www.example.com">example</a>????????????????????????????????????
</div>?
<!--EXAMPLE-TWO-->
<div class="my-class">
<a href="http://www.example.com">example</a>????????????????????????????????????
</div>?Q:Why doesn't the text-alignstyle get applied to the aelement instead of the div?
问：为什么text-align样式没有应用到a元素而不是div？
A:The text-alignstyle describes how inlinecontent is aligned within a blockelement. In this case the divis an block element and it's inline content is the a. To further explore this consider how little sense it would make to apply the text-alignstyle to the aelement when it is accompanied by more text
答：该text-align风格描述了如何inline内容是内对齐block元素。在这种情况下，div是一个块元素，它的内联内容是a。为了进一步探索这一点，请考虑当元素伴随更多文本时将text-align样式应用于a元素的意义不大
<div>
Plain text is inline content.
<a href="http://www.example.com" style="text-align: center">example</a>
<span>Spans are also inline content</span>
</div>
Even though threre are line breaks here all the contents of divare inline content and therefore will produce something like:
即使这里有换行符，所有的内容div都是内联内容，因此会产生如下内容：
Plain text is inline content. exampleSpans are also inline content
纯文本是内联内容。示例跨度也是内联内容
It doesnt' make much sense as to how "example" in this case would be displayed if the text-alignproperty were to be applied it it.
如果text-align要应用该属性，则在这种情况下如何显示“示例”并没有多大意义。
回答by sandeep
write like this:
像这样写：
<div class="parent">
<a href="http://www.example.com">example</a>
</div>
CSS
CSS
.parent{
text-align:center
}
回答by bookcasey
Two options, that have different uses:
两个选项，具有不同的用途：
HTML:
HTML：
<a class="example" href="http://www.example.com">example</a>
CSS:
CSS：
.example { text-align: center; }
Or:
或者：
.example { display:block; width:100px; margin:0 auto;}
回答by Eric K
Try
尝试
margin: 0 auto;
display:table
Hope that helps somebody out.
希望能帮助别人。
回答by clem
try to wrap a div around and add these styles to the div:
尝试环绕一个 div 并将这些样式添加到 div：
width: 100%;
text-align:center;
回答by Awaissoft
<span style="text-align:center; display:block;">
<a href="http://news.awaissoft.com">Awaissoft</a>
</span>
回答by Sharavnan Kv
You can try this code:
你可以试试这个代码：
/**code starts here**/
a.class_name { display : block;text-align : center; }
回答by Quentin
By default an anchor is rendered inline, so set text-align: center;on its nearest ancestor that renders as a block.
默认情况下，anchor 是内联呈现的，因此设置text-align: center;在其最近的祖先上，呈现为一个块。
回答by Niet the Dark Absol
There are many ways.
有很多方法。
<!-- Probably the most common: -->
<div style="text-align: center;"><a href="...">Link</a></div>
<!-- Getting crafty... -->
<a href="..." style="display: block; text-align: center;">Link</a></div>
There are probably other ways too, but these three are probably the most common.
可能还有其他方法，但这三种可能是最常见的。
回答by Chandan Gorapalli
css cannot be directly applied for the alignment of the anchor tag. The css (text-align:center;) should be applied to the parent div/element for the alignment effect to take place on the anchor tag.
css 不能直接应用于锚标签的对齐。css (text-align:center;) 应该应用于父 div/element 以在锚标记上发生对齐效果。
