第13章:CSS实战技巧
13.1 水平居中
13.1.1 非块元素的水平居中
- 文字、
inline
行内元素和inline-*
复合行内元素用text-align:center
来实现水平居中。复合行内元素包括:inline-block
、inline-table
和inline-flex
等元素。
text-align:center;
13.1.2 块元素的水平居中
-
block
块元素通过margin-left:auto;margin-right:auto;
实现水平居中
margin:0 auto;
13.2 垂直居中
- 单行文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 40px;
line-height: 40px;
border: 1px dashed gray;
}
</style>
</head>
<body>
<div>单行文字垂直居中</div>
</body>
</html>
- 多行文字的垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: table-cell;
vertical-align: middle;
height: 300px;
width: 500px;
border: 1px dashed gray;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div>
<span>
多行文字的垂直居中
名人实名举报信发布后被自行删除
中国网络直播用户规模达4.22亿 年增长率达22.6%
美国否决中资收购芝加哥证券交易所
中戏“艺考”今日拉开序幕 易烊千玺现身考场
</span>
</div>
</body>
</html>
-
inline
、inline-block
和block
块元素都可以通过position
的方式实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
position: relative;
height: 200px;
width: 400px;
border: 1px dashed gray;
}
.content{
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;/*取自身height的一半*/
margin-left: -50px;/*取自身width的一半*/
width: 100px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
-
inline-block
元素还可以通过table-cell
结合vertical-middle
来实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 440px;
height: 260px;
border:1px dashed gray;
}
img{
vertical-align: middle;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="../img/weibo.png" alt="weibo" />
</div>
</body>
</html>
13.3 CSS Sprite
- CSS Sprite技术是将零散的图片合并成一张大的背景图,然后利用
background-position
属性进行背景定位从而显示相应的小背景图。 - CSS Sprite的工具:
- CSS Sprite Generator可以上传一个图片文件夹的压缩包,然后工具会自动生成雪碧图;
- Sprite Cow可以选中雪碧图中某个图标,自动生成CSS代码;
- 虽然CSS Sprite很方便,但也存在明显的缺点,就是开发和维护比较困难。所以我们在使用CSS Sprite技术的时候,1. 应该在开发后期使用,如果在开发前期就使用,可能需要频繁的变换图标;2. 应该有条理地组织“雪碧图”,按照类型、风格、大小等分门别类放好图标;3. 控制好雪碧图的大小,如果图片超过200KB,会耗费更多的传输时间,则应该分隔成多个雪碧图
13.4 Icon Font图标
使用IonFont图标的四个步骤:
网友评论