前言根据视频和PPT整理视频及对应资料：HTML CSS
文章目录
1. 文字垂直居中对齐
CSS 的 -align 属性可以用于设置图片或者行内块元素和文字垂直居中对齐。
CSS 的 -align 属性 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
图片、表单都属于行内块元素图片 居中 css图片 居中 css [CSS]文字垂直居中对齐 ＆ 解决图片底部默认空白缝隙 ＆ 文字溢出省略号显示，默认的 -align 是基线对齐。可以给图片、表单这些行内块元素的 -align 属性设置为 就可以让文字和图片垂直居中对齐了。
语法：
vertical-align : baseline | top | middle | bottom
代码示例：
.box {
width: 200px; height: 50px; background-color: aquamarine; /* 行高 图片与文字垂直居中 */ line-height: 50px; } img {
/* 设置图片与文字中线对其 */ vertical-align: middle; }
<p>![图片 居中 css_css图片居中拉伸_css使图片居中][3]
hello world!
</p>
2. 解决图片底部默认空白缝隙
默认情况下，图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加 -align: | top| 等。 （推荐使用）
2.把图片转换为块级元素 : block;
代码示例：
div {
width: 200px; margin: 10px; background-color: aquamarine; } .box1>img {
/* 与文字中线对其 */ vertical-align: middle; } .box2>img {
display: block; }
hello world!
3. 文字溢出省略号显示3.1 单行文本溢出显示省略号
单行文本溢出显示省略号必须满足三个条件：
1.先强制一行内显示文本
2.超出的部分隐藏
3.文字用省略号替代超出的部分
/1. 先强制一行内显示文本/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
代码示例：
div {
<p>![图片 居中 css_css图片居中拉伸_css使图片居中][7]
width: 200px; height: 50px; margin: 10px; background-color: aquamarine; } .box2 {
/* white-space 默认取值为 normal 文字一行显示不下换行显示 */ white-space: normal; } .box3 {
/* 文字一行显示，不进行换行显示 */ white-space: nowrap; /* 文字的溢出部分进行隐藏 */ overflow: hidden; /* 文字超出部分使用省略号(ellipsis)代替 */ text-overflow: ellipsis; }
hello world! hello world! hello world!
hello world! hello world! hello world!
hello world! hello world! hello world!
</p>
3.2 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题图片 居中 css， 适合于浏览器或移动端（移动端大部分是内核）
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
<p>![css图片居中拉伸_css使图片居中_图片 居中 css][9]
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;</p>
代码示例：
div {
width: 200px; margin: 10px; background-color: aquamarine; } .box2 {
/* 超出部分进行隐藏 */ overflow: hidden; /* 文字超出使用省略号显示 */ text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ /* 不给盒子设置高度，高度由文字撑开，如果要给盒子设置高度，需要注意高度的设置 */ /* 两行的文字高度 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ /* 内容垂直居中 */ -webkit-box-orient: vertical; }
hello world! hello world! hello world! hello world! hello world! hello world!
hello world! hello world! hello world! hello world! hello world! hello world!
