css - 是否可以将 inline-block 元素居中，如果可以，如何？

Question

我有一个最初未知宽度的元素，特别是用户提供的 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。有没有人有解决方案来使这个方程居中？

score 140 · Accepted Answer

140

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

于 2011-09-29T18:24:27.990 回答

score 26 · Accepted Answer

另一种方法（也适用于块元素）：

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

解释：left:50% 将从包含父元素的中心开始定位元素，因此您想使用 transform: translateX(-50%)将其拉回其宽度的一半

注意1：一定要将包含父级的位置设置为位置：相对；如果父级是绝对定位的，则在其中放置 100% 的宽度和高度、0 填充和边距 div 并给它位置：相对

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

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

score 12 · Accepted Answer

有点晚了，但类似于 Ivek 的回答，您可以通过使用而不是来避免使用position声明，所以：margin-leftleft

margin-left: 50%; transform: translateX(-50%);

score 0 · Accepted Answer

您可以使用 max-content 执行此操作：

.element {
  margin-inline: auto;
  width: max-content;
}

使用width: fit-content也将起作用。

4 回答 4