文本垂直居中
方法:
盒内元素的行高等于盒子的高度即可完成文本的垂直居中。
结果如下图:
将如下代码复制保存为.html
格式的文件,并用浏览器查看结果。
注意第23
与26
行设置两者高度相同。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本垂直居中</title>
<style>
.nav {
text-align: center;
background-color: #f00;
}
.nav > sapn {
display: inline-block;
}
.nav a {
text-decoration:none;
display: inline-block;
height: 100px;
width: 100px;
background-color: #00ff00;
line-height: 100px;
}
</style>
</head>
<body>
<div class="nav">
<span>
<a href="#">标签</a>
</span>
<span>
<a href="#">标签</a>
</span>
<span>
<a href="#">标签</a>
</span>
<span>
<a href="#">标签</a>
</span>
</div>
</body>
</html>
设置背景图
在需要背景图的模块加上——background-image: url(IMAGE_PATH)
,注意IMAGE_PATH
是相对路径,即相对于当前.html
文件的路径。