是否可以将一个 inline-block 元素居中? 如果可以，怎么做？

我有一个最初宽度未知的元素，特别是用户提供的 MathJax 方程。我将元素设置为 inline-block，以确保元素的宽度符合其内容，并且具有已定义的宽度。然而，这阻止了传统的定心方法。也就是说，以下方法不起作用:

.equationElement
{
display: inline-block;
margin-left: auto;
margin-right: auto;
}

解决办法不可能是:

.equationElement
{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
}

因为我不知道宽度事先应该是什么，如果用户点击方程，我需要整个方程高亮显示，所以我不能设置宽度为0。有人能解决这个等式的中心问题吗？

108641 次浏览
小开
最佳答案

只需在容器上设置 text-align: center;。

这里有一个演示。

小开

这样做的另一种方法(也适用于 block element) :

.center-horizontal {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

说明: Left: 50% 将从包含父元素的中心定位元素 开始，因此您希望使用 change: translaateX (- 50%)将 拉回来的宽度减少一半

注一: 确保将包含父元素的位置设置为 position: relant; 如果父元素绝对定位，则在其中放置100% 的宽度和高度、0填充和边距 div，并给出位置: relant

注2: 也可以修改为垂直居中

top:50%;
transform: translateY(-50%);
小开

有点晚，但是与 Ivek 的答案相似，您可以通过使用 margin-left而不是 left来避免使用 position声明，因此:

左边距: 50% ; 转换: transateX (-50%) ;

小开

可以通过将其更改为 block 元素并使用 max-content:

.element {
display: block; /* Change from inline-block to block */
margin-inline: auto;
width: max-content;
}

使用 width: fit-content也可以。

小开

按照我的方法，我将 inline-block 元素与其他 div (例如，包装器)包装起来，然后神奇地将其居中，如果不这样做，那么就给包装器类赋予间距 auto 或其他值


提交答案