bootstrap 提供四種水平居中元素的方法:使用 .text-center 類使用 justify-content 實用程序使用 margin: auto使用輔助類 .mx-auto
Bootstrap 居中顯示元素
Bootstrap 提供了幾種方法來水平居中顯示元素:
使用 .text-center 類
最簡單的方法是將 .text-center 類應用于要居中的元素。
例如:
Hello
使用 justify-content 實用程序
對于行內元素,可以使用 justify-content 實用程序。
例如,可以使用 row 類創建一個行,然后將 justify-content-center 應用于該行。內部元素會自動居中。
`
Item 1
Item 2
`
使用 margin: auto
對于塊級元素,可以使用 margin: auto 實用程序。
例如:Item
使用輔助類
Bootstrap 提供了名為 .mx-auto 的輔助類,它為元素添加 margin: auto 樣式。
例如:Item
注意:
并非所有方法都適用于所有元素。
居中顯示通常與其他樣式結合使用,例如設置元素寬度或高度。
可以根據需要組合使用這些方法來實現所需的效果。