html - 是否可以在没有额外标记或样式父容器的情况下将内联元素水平居中？

Question

这个问题基本上已经在标题中说明了，但要澄清一下：我正在尝试将锚点水平居中<a>在主要内容区域中。

我想这样做没有：

• 使用固定宽度
• 添加额外的标记（例如额外的父级div）
• 样式化父容器（text-align:center例如将父容器设置为）
• 设置<a>为全宽块（我想保持可点击区域与链接本身一样大）

所以基本上我想通过在css中以动态（收缩包装）方式设置锚本身的样式来做到这一点。我一直在尝试，但还没有找到方法，有人知道怎么做吗？

Answer 1

试试这个 -演示

a {
    display: table;
    margin: auto;
}

Answer 2

如果可能的话，我个人尽量不更改元素的显示类型，尤其是出于可访问性原因，更改为“表格”之类的内容。

不幸的是，正常的margin: 0 auto;技巧在这里不起作用。

希望这可以帮助！

a {
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

<a href="#">Center Me</a>

Answer 3

试试这个

a{
display:block;
text-align:center;
}