1. 打開 WebStorm 集成開發(fā)工具,新建 '' 網(wǎng)頁(yè),在網(wǎng)頁(yè)的同級(jí)目錄新建 bootstrap 文件夾,并在文件夾內(nèi)放入 bootstrap.min.css 文件,版本 3.7。引入 Boot

1. 打開 WebStorm 集成開發(fā)工具,新建 '' 網(wǎng)頁(yè),在網(wǎng)頁(yè)的同級(jí)目錄新建 bootstrap 文件夾,并在文件夾內(nèi)放入 bootstrap.min.css 文件,版本 3.7。

引入 Bootstrap 并添加居中 div

2. 在 '' 引入 bootstrap.min.css 文件,并在 body 標(biāo)簽內(nèi)放一個(gè) div,代碼如下:

```html

```

3. 查看網(wǎng)頁(yè)效果如下圖,在整個(gè)頁(yè)面左上角。

使用 margin: 0 auto 水平居中

4. 修改 '' 代碼如下:

```html

```

僅增加了一個(gè)樣式 `margin: 0 auto`。

5. 再次刷新網(wǎng)頁(yè)查看效果,div 水平居中了。

將 div 改為 button 元素

6. 修改代碼,把 div 標(biāo)簽換成 button,代碼如下:

```html

hhhh

```

7. 再次刷新網(wǎng)頁(yè)查看效果,button 回到了左上角。

添加 display: block 屬性

8. 修改代碼如下:

```html

hhhh

```

增加了 `display: block` 屬性。

9. 再次刷新網(wǎng)頁(yè)查看效果,button 水平居中了。這就是 Bootstrap 元素水平居中的方法,注意文字水平居中使用 `text-align: center` 屬性。

總結(jié)

在使用 Bootstrap 進(jìn)行頁(yè)面布局時(shí),可以通過(guò)設(shè)置 `margin: 0 auto` 和 `display: block` 屬性來(lái)實(shí)現(xiàn)元素的水平居中。同時(shí),對(duì)于文字的水平居中,可以使用 `text-align: center` 屬性來(lái)實(shí)現(xiàn)。這些是 Bootstrap 中常見的水平居中方法,可以根據(jù)實(shí)際需求靈活應(yīng)用。