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

我有一個初始未知寬度的元素，特別是用戶提供的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

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

回答

相關問題