如何使用 CSS 水平居中链接元素

Question

就像标题所说的，我怎样才能水平居中<a>元素？仅使用 CSS 执行此操作的主要奖励点。

.center {
  text-align: center;
  align-self: center:
  margin: 0 auto;
}
.expander_link {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
  font-size: 100%;
  font-weight: bold;
  color: hotpink;
  text-align: center;
  align-self: center;
  text-decoration: none;
}

<h4 class="center">hello</h4>
<p>
  blah blah blah blah blah blah blah blah blah blah
</p>
<a id="link_1" href="3801" data="1" class="expander_link">center me horizontally</a>

Answer 1

你应该这样尝试-

  .center {
  text-align: center;
  /*align-self: center;*/
  margin: 0 auto;
}
.expander_link {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
  font-size: 100%;
  font-weight: bold;
  color: hotpink;
  text-align: center;
  align-self: center;
  text-decoration: none;
  display: block;	
}

<h4 class="center">hello</h4>
<p>
  blah blah blah blah blah blah blah blah blah blah
</p>
<a id="link_1" href="3801" data="1" class="expander_link">center me horizontally</a>

Answer 2

要将内联级元素(如 <a> 标签(居中，我建议将其包装成块级元素，如 <p> 或 <div> 等，然后设置p {text-align:center;} .请参阅下面最简单的示例：

p {
  text-align: center;
}

<p><a href="#">Center me horizontally</a></p>

如果您想要额外的间距，只需添加a {display:inline-block;}并根据需要设置margin和padding值，或将其设置为<p>标签上。

p {
  text-align: center;
}
p a {
  display: inline-block;
  margin: 50px 0;
  padding: 10px;
  outline: 1px solid aqua;
}

<p><a href="#">Center me horizontally</a></p>

如果不允许修改标记，则可以执行以下操作。请注意，可点击区域将展开，padding适用。你可能不想这样。运行演示以查看。

a {
  display: block;
  text-align: center;
  margin: auto;
  
  padding-top: 50px;
  padding-bottom: 50px;
  outline: 1px solid aqua;
}

<a href="#">Center me horizontally</a>

要修复不需要的间距，您可以进行display:table黑客攻击。它是内联和块的组合(收缩以适合和强制换行之前/之后的特征(。

a {
  display: table;
  margin: 50px auto;
  padding: 10px;
  outline: 1px solid aqua;
}

<a href="#">Center me horizontally</a>

当然，还有其他方法，例如使用 flexbox ，按照其他好的答案来了解更多信息。

Answer 3

尝试：

.expanded_link{
  display: block;
  text-align: center;
}

Answer 4

试试这个

.expanded_link{
  display: block;
  text-align: center;
  text-decoration: none;
}

Answer 5

在.expander_link中使用下面的css

width: 200px;
display: block;
margin-left: auto;
margin-right: auto;

所以你的类将是这样的：

.expander_link {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
  font-size: 100%;
  font-weight: bold;
  color: hotpink;
  text-align: center;
  align-self: center;
  text-decoration: none;
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

它将水平集中<a>，并且响应迅速。因此，无论页面的大小如何，它都会始终使其水平居中。

这是工作小提琴。