Bootstrap 元素水平居中方法

1. 打开 WebStorm 集成开发工具,新建 '' 网页,在网页的同级目录新建 bootstrap 文件夹,并在文件夹内放入 bootstrap.min.css 文件,版本 3.7。

引入 Bootstrap 并添加居中 div

2. 在 '' 引入 bootstrap.min.css 文件,并在 body 标签内放一个 div,代码如下:

```html

```

3. 查看网页效果如下图,在整个页面左上角。

使用 margin: 0 auto 水平居中

4. 修改 '' 代码如下:

```html

```

仅增加了一个样式 `margin: 0 auto`。

5. 再次刷新网页查看效果,div 水平居中了。

将 div 改为 button 元素

6. 修改代码,把 div 标签换成 button,代码如下:

```html

hhhh

```

7. 再次刷新网页查看效果,button 回到了左上角。

添加 display: block 属性

8. 修改代码如下:

```html

hhhh

```

增加了 `display: block` 属性。

9. 再次刷新网页查看效果,button 水平居中了。这就是 Bootstrap 元素水平居中的方法,注意文字水平居中使用 `text-align: center` 属性。

总结

在使用 Bootstrap 进行页面布局时,可以通过设置 `margin: 0 auto` 和 `display: block` 属性来实现元素的水平居中。同时,对于文字的水平居中,可以使用 `text-align: center` 属性来实现。这些是 Bootstrap 中常见的水平居中方法,可以根据实际需求灵活应用。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。