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

你应该尝试这样 -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试：

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

Answer 3

试试这个

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

Answer 4

在.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>，并且响应。因此，无论页面的大小如何，它都将始终使其水平居中。

以下是fiddle。

Answer 5

要将内联级元素（如<a>标记）居中，我建议将其包装到块级元素中，如或<div>等，然后设置{{ 1}}。请参见以下最简单的示例：

＆＃13;

p {text-align:center;}

＆＃13;

p {
  text-align: center;
}

＆＃13;

如果您想要额外的间距，只需添加<a href="#">Center me horizontally</a>并根据需要设置a {display:inline-block;}和margin值，或将其设置在padding标记上。

＆＃13;

<p>

＆＃13;

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

＆＃13;

如果不允许修改标记，则可以执行以下操作。注意，可点击区域将展开，<a href="#">Center me horizontally</a>适用。你可能不希望这样。运行演示以查看。

＆＃13;

padding

＆＃13;

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

＆＃13;

要修复不需要的间距，您可以执行<a href="#">Center me horizontally</a>黑客攻击。它是内联和块的组合（缩小到适合并强制在特征之前/之后断行）。

＆＃13;

display:table

＆＃13;

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

＆＃13;

当然，还有其他方法，例如使用<a href="#">Center me horizontally</a>，请按照其他好的答案来了解更多信息。

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

5 个答案: