是否可以居中嵌套块元素，如果是，如何？

我有一个初始未知宽度的元素，特别是用户提供的MathJax方程。我将元素设置为内嵌块，以确保元素的宽度适合其内容，并使其具有定义的宽度。但是，这阻止了传统的居中方法。也就是说，下面不工作：是否可以居中嵌套块元素，如果是，如何？

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

而且解不了：

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

因为我不知道宽度实际上应该是事先如果放在等式的用户点击，我需要突出显示整个公式，所以我不能将宽度设置为0.有没有人有解决方案来集中这个方程？

来源

2011-09-29 Deets McGeets

顺便说一句，注册似乎布洛克在该页面上使用Chrome。如果我点击注册按钮，没有JavaScript，没有任何反应。 – phihag

迷人！我使用的是Chrome，它对我来说工作正常。你使用哪种帐户类型？ Google，Facebook，Twitter？ –

myopenid。我是100％，如果JavaScript被关闭，它不会在谷歌浏览器中工作。该按钮甚至没有表单，反正也不是提交按钮。 – phihag

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

Here's a demo。

来源

2011-09-29 18:24:27 phihag

这是一个好主意，它可以工作，如果我设置'display：block'，但然后该元素占用其容器的宽度，或者我不得不手动设置宽度，但我不知道宽度是多少。如果元素被设置为'inline-block'，则它不起作用。它需要成为'inline-block'的原因是它的宽度对其内容是动态的。感谢您的好主意。如果你可以改变它，使它适用于'inline-block'，那将是完美的。 –

@Vivek Viswanathan你能否详细说明为什么“如果元素被设置为内联块，它不起作用”？在演示页面添加了[链接]（http://phihag.de/2011/so/inline-block-center.html）。 – phihag

这似乎工作，因为'文本对齐：中心'设置在父元素。但是，我不能在我的代码中这样做，因为'inline-block'元素具有不能居中的兄弟。再次感谢您的帮助。 –

另一种方式来做到这一点（适用于块级元素也）：

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

说明：左：50％的位置上的元素从包含父的中心开始，所以要将其拉回其一半的宽度与转换：translateX（-50％）

注1：请务必将包含父级的位置设置为position：relative;如果父绝对定位放一个100％的宽度和高度，0填充和余量DIV中，并给它的位置是：相对于

注2：也可以修改为垂直定心与

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

来源

2015-12-03 17:02:53 Ivek

这个很棒！ – metahamza

你不需要'绝对'定位，可以使用'margin：50％;' – Kevin

你不需要绝对的，但是如果位置是'static'（默认元素的定位），则左/右不会工作。如果“绝对”不是特定需求，则应该使用'relative' –

小晚了，但类似IVEK的回答，你能避免使用margin-left，而不是left使用position声明，所以：

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

来源

2017-10-05 16:47:07

是否可以居中嵌套块元素，如果是，如何？

回答

相关问题