Question

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

Answer 1

您可以将其打包在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;
}

Answer 2

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

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

和你的css：

#nav
{
   text-align: center;
}

祝你好运！

Answer 3

属性text-align：center应该与父元素相关联

Answer 4

<a href="#">Link</a>

a {
  display: block;
  margin: auto;
}

Answer 5

我迟到了8个月才回复，但我遇到了与Backtrack相同的问题，并且尝试结合上述答案，设法解决了这一不幸。如果您日后需要此解决方案，我会非常尊敬地与您分享。

CSS：

a {

  text-align: center;

  margin: 20px;

  display: block;

   }

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

无法文本对齐：以css为中心

5 个答案: