是否可以将内联块元素居中,如果是,如何？

Question

我有一个最初未知宽度的元素,特别是用户提供的MathJax方程.我将元素设置为内联块,以确保元素的宽度适合其内容,并使其具有定义的宽度.然而,这阻止了传统的居中方法.也就是说,以下不起作用:

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

解决方案不能是:

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

因为我不知道预先应该实际宽度是多少,如果用户点击方程,我需要突出显示整个方程,所以我不能将宽度设置为0.有没有人有解决方案来使这个方程居中？

Answer 1

只需text-align: center;放在容器上即可.

@Vivek Viswanathan嗯,你不能把公式包装成一个特殊的`display:block;`容器吗？那个容器将占据宽度的100%,但这应该不是问题,或者是它？ (5认同)

Answer 2

另一种方法(也适用于块元素):

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

说明:left:50%将元素从包含父元素的中心开始定位,因此您希望使用transform 将其拉回一半宽度:translateX(-50%)

注1:务必将包含父项的位置设置为position:relative; 如果父级是绝对定位的,则在其中放置100%的宽度和高度,0填充和边距div并给它位置:relative

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

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

Answer 3

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

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