Bootstrap元素水平居中方法
1、打开WebStorm集成开发工具，新建‘test.html’网页，在网页的同级目录新建bootstrap文件夹，并在文件夹内放入bootstrap.min.css文件，版本3.7。
2、在‘test.html’引入bootstrap.min.css文件，并在body标签内放一个div，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link ref="stylesheet" href="bootstrap/bootstrap.min.css">
</head>
<body>
<div style="width: 100px;height: 200px;background-color:red">hhhh</div>
</body>
</html>
3、查看网页效果如下图,在整个页面左上角。
4、修改‘test.html’代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link ref="stylesheet" href="bootstrap/bootstrap.min.css">
</head>
<body>
<div style="width: 100px;height: 200px;background-color:red;margin: 0 auto">hhhh</div>
</body>
</html>
仅增加了一个样式margin: 0 auto
5、再次刷新网页查看效果，div水平居中了
6、修改代码，把div标签换乘button，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link ref="stylesheet" href="bootstrap/bootstrap.min.css">
</head>
<body>
<button style="width: 100px;height: 200px;background-color:red;margin: 0 auto">hhhh</button>
</body>
</html>
7、再次刷新网页查看效果，button回到了左上角
8、修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link ref="stylesheet" href="bootstrap/bootstrap.min.css">
</head>
<body>
<button style="width: 100px;height: 200px;background-color:red;margin: 0 auto;display: block;">hhhh</button>
</body>
</html>
增加了display:block属性
9、再次刷新网页查看效果，button水平居中了,这就是bootstrap元素水平居中的方法，注意文字水平居中使用text-align:center属性
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：180
阅读量：111
阅读量：43
阅读量：118
阅读量：94