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

Like the title said, how can I horizontally center the <a> element? Major bonus points for doing it with CSS only.

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

5 个解决方案

#1

You should try like this-

你应该尝试这样 -

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

#2

Try:

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

#3

try this

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

#4

Use below css in .expander_link

在.expander_link中使用以下css

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

So your class will be like this :

所以你的课将是这样的:

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

It will centralize the <a> horizontally, and also it is responsive. So no matter what the size of the page, it will always make it horizontally centered.

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

Here is working fiddle.

这是工作小提琴。

#5

To center an inline-level element, like <a>tag, I would suggest to wrap it into a block-level element, like <p> or <div> etc, then set p {text-align:center;}. See the simplest example follows:

要将内联级元素(如标记)居中,我建议将其包装到块级元素中,如

或

等,然后设置p {text-align:center;}。请参见以下最简单的示例:

p {
  text-align: center;
}

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

If you want extra spacing around, simply add a {display:inline-block;} and set margin and padding values as needed, or set it on <p> tag.

如果你想要额外的间距,只需添加一个{display:inline-block;}并根据需要设置margin和padding值,或者在

标签上设置它。

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>

If you are not allowed to modify the markup, you could do the following. Note, the clickable area will be expanded, padding applies to. you might not want that. Run the demo to see.

如果您不允许修改标记,则可以执行以下操作。注意,可点击区域将被展开,填充适用于。你可能不想那样。运行demo来查看。

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

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

To fix the unwanted spacing, you could do the display:table hack. It a combination of inline and block (shrink-to-fit and forces line break before/after features).

要修复不需要的间距,您可以执行display:table hack。它是内联和块的组合(缩小到适合并在特征之前/之后强制断行)。

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

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

Of course, there are other ways, such as using flexbox, follow the other good answers to learn more about it.

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

#1