如何在不破壞響應能力的情況下將內聯塊元素居中？

如何將內聯塊元素居中

由於傳統方法的限制，使內聯塊元素居中可能很棘手。但是，有一個使用 CSS 的簡單解決方案。

問題

嘗試使用margin-left 和margin-right auto 將內聯塊元素居中不會出現問題之所以有效，是因為內聯塊元素沒有定義的寬度。將 display 屬性設為 block 可以解決居中問題，但會破壞回應能力並阻止突出顯示整個元素。

解

要居中內聯塊元素，設定文字對齊：在容器上居中。這將使內聯塊元素在容器內水平居中。

範例

.container {
  text-align: center;
}

.equationElement {
  display: inline-block;
}

示範

[示範連結在此]

以上是如何在不破壞響應能力的情況下將內聯塊元素居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！