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

Posted 2023-03-05

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

【英文标题】：Is it possible to horizontally center an inline element without extra markup or styling parent containers?

【发布时间】：2013-04-02 14:44:45

【问题描述】：

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

我想这样做没有：

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

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

【问题讨论】：

还有 display: inline-block

how to center anchor tag horizontally css 的可能重复项

【参考方案1】：

试试这个 - DEMO

a 
    display: table;
    margin: auto;

【讨论】：

这个问题是几年前提出的，今天我偶然发现了它。你刚刚拯救了我的一天谢谢。我想要实现的是将元素居中而不给它特定的响应宽度，而这个答案是杀手锏！

您节省了很多时间。谢谢

【参考方案2】：

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

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

希望这会有所帮助！

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

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

【参考方案3】：

试试这个

a
display:block;
text-align:center;

【讨论】：

虽然您的答案在如何使元素居中方面是正确的，但问题是如何使 inline-block 元素居中。使其成为块级元素会破坏对象。