CSS编码规范,CSS垂直居中
2017-03-10 本文已影响0人
LINPENGISTHEONE
说一说你平时写代码遵守的编码规范
- 命名英文小写。
- 命名用引号包裹。
- 中横线链接命名。
- 命名体现功能，不涉及样式。
- 注意换行。
- 每条声明后加分号。
- 小数不用前缀。
- 尽量缩写。
- 参考bootcss规范
垂直居中有几种实现方式，给出代码范例
- 通过padding实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.ct {
padding: 40px 0;
text-align: center;
background: #eee;
}
</style>
</head>
<body>
<div class="ct">
<p>这里是饥人谷</p>
<p>这里是饥人谷</p>
</div>
</body>
</html>
- 通过绝对定位来实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header {
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content {
padding: 10px;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
</html>
- 通过vertical-align实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.box {
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img {
vertical-align: middle;
background: blue;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
- 通过table-cell实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.box {
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
