4

我似乎无法将“主页”按钮置于中心位置。主页文本位于左侧而不是中心。我的 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：

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;
}
4

5 回答 5

15

你可以把它包装在一个div：

<div align="center">
  <a href="New.html" class="nav-link">Home</a>
</div>

或者您可以为以下对象创建一个类div：

HTML：

<div class="myDiv">
  <a href="New.html" class="nav-link">Home</a>
</div>

CSS：

.myDiv {
    text-align: center;
    width: 300px;
}
于 2012-04-17T01:18:51.747 回答
2

text-align 属性只会使文本在它所在的容器中居中。在这种情况下，a 标记仅与文本一样宽。因此，无论您如何在该链接标记上设置 text-align 属性，它都将始终显示相同。要使其居中，您需要将其放在更宽的元素中。

<div id="nav">
    <a href="New.html" class="nav-link>Home</a>
</div>

和你的CSS：

#nav
{
   text-align: center;
}

祝你好运！

于 2012-04-17T01:22:34.397 回答
1

属性 text-align:center 应该附属于父元素

于 2012-04-17T01:22:56.863 回答
0 
<a href="#">Link</a>

a {
  display: block;
  margin: auto;
}
于 2012-11-20T12:09:12.560 回答
0

我迟到了 8 个月回复，但我遇到了与 Backtrack 相同的问题，通过尝试上述答案的组合，我设法以这种方式解决了我的不幸。我非常尊重地与您分享它，以防将来有人需要此解决方案。

CSS：

a {

  text-align: center;

  margin: 20px;

  display: block;

   }

如果您在“a”标签中使用“Id”，它也可以工作。

于 2020-12-12T22:18:12.763 回答