无法在CSS上使用text-align:center。

Question

无法在CSS上使用text-align:center。

4

我的“主页”按钮无法居中。主页文本在左侧而不是中心。我将我的HTML和CSS链接如下：

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

- Backtrack

5个回答

2

text-align属性只会将文本居中在它所在的容器内。在这种情况下，a标签的宽度仅为文本宽度。因此，无论您如何设置该链接标签上的text-align属性，它始终会呈现相同的外观。要使其居中，您需要将其放置在一个宽度更大的元素中。

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

以及你的CSS样式：

#nav
{
   text-align: center;
}

祝你好运！

- Ricketts

1

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

- user1272500

0

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

a {
  display: block;
  margin: auto;
}

- mrded

0

我虽然回复晚了8个月，但我和Backtrack遇到了同样的问题，通过尝试以上答案的组合，我成功地解决了我的错误。我非常尊重地与您分享这个解决方案，以防将来有人需要它。

CSS:

a {

  text-align: center;

  margin: 20px;

  display: block;

   }

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

- JFMS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sooper · Accepted Answer

你可以用 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;
}