Html 无法文本对齐：在 css 上居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10183800/
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
Can't text-align:center on css
提问by Backtrack
I can't seem to get my "Home" buttons to the center. The home text is at the left instead of the center.I have my htm and css linked like this: html:
我似乎无法将“主页”按钮置于中央。主页文本位于左侧而不是中心。我的 htm 和 css 链接如下：html：
<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css"/>
</head>
<body>
<h1>Bully-Free Zone</h1>
<h2>"Online harassment has an off-line impact"</h2>
<a href="New.html" class="nav-link">Home</a>
</body>
</html>
Css:
css：
a.nav-link:link
{
color: black;
text-decoration: underline;
font-family:broadway;
font-size:30px;
text-align:center;
}
a.nav-link:visited
{
color: black;
text-decoration: none;
}
a.nav-link:hover
{
color: black;
text-decoration: none;
}
a.nav-link:active
{
color: black;
text-decoration: none;
}
回答by sooper
You could wrap it in a div:
你可以把它包装在一个div：
<div align="center">
<a href="New.html" class="nav-link">Home</a>
</div>
Or you can create a class for the div:
或者您可以为以下对象创建一个类div：
HTML:
HTML：
<div class="myDiv">
<a href="New.html" class="nav-link">Home</a>
</div>
CSS:
CSS：
.myDiv {
text-align: center;
width: 300px;
}
回答by Ricketts
The text-align property will only center the text within the container it's in. In this case, the a tag is only as wide as the text. So regardless how you set your text-align property on that link tag, it will always appear the same. To center it you need to put it in an element that is wider.
text-align 属性只会使文本在它所在的容器内居中。在这种情况下，a 标签的宽度仅与文本一样宽。因此，无论您如何在该链接标签上设置 text-align 属性，它都会始终显示相同。要将其居中，您需要将其放在更宽的元素中。
<div id="nav">
<a href="New.html" class="nav-link>Home</a>
</div>
and your css:
和你的CSS：
#nav
{
text-align: center;
}
Good Luck!
祝你好运！
回答by Ke Pasa
Property text-align:center should be appurtenant to parent element
属性 text-align:center 应该附属于父元素
回答by mrded
<a href="#">Link</a>
a {
display: block;
margin: auto;
}
