1.vertical-align垂直对齐
- 有宽度的块级元素居中对齐，是margin:0 auto
- 让文字居中对齐，是text-align：center
- vertical垂直对齐，它只针对于行内元素或者行内块元素
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
/*基线对齐*/
vertical-align: baseline;
}
.two{
/*让图片的中线对齐 文字的中线*/
vertical-align: middle;
}
.three{
/*让图片的顶部和文字对齐*/
vertical-align: top;
}
</style>
</head>
<body>
<div>
<img src="imgs/2.jpg" alt="" class="one">你瞅啥？
</div>
<div>
<img src="imgs/2.jpg" alt="" class="two">你瞅啥？
</div>
<div>
<img src="imgs/2.jpg" alt="" class="three">你瞅啥？
</div>
</body>
</html>
1.1去除图片底侧空白缝隙
- 原因
图片或者表单等行内块元素，他的底线默认和父级盒子的基线对齐，就会造成图片底侧有一个空白间隙 - 解决方法：
1.给img vertical-align:middle|top|bottom等等
2.把图片改成块级元素： display：block;- 举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border:1px solid red;
}
div img{
/*1、只要不是基线对齐所有垂直对齐都可以去掉缝隙*/
vertical-align: top;
/*2.转换为块级元素*/
/*display: block;*/
}
</style>
</head>
<body>
<div>
<img src="imgs/2.jpg" alt="">瞅啥呢
</div>
</body>
</html>
2.1white-space
- white-space设置或检索对内文本显示方式，通常我们使用于强制一行显示内容
white-space:normal;默认处理方式
white-space:nowrap;强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
2.2text-overflow文字溢出
- 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-overflow:clip;不显示省略标记（...）而是简单的裁切
text-ovetflow:ellipsis;当对象内文本溢出时显示省略标记(...)
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 150px;
height: 20px;
border:1px solid red;
/*当文字显示不开的时候自动换行*/
/*white-space:normal;*/
/*1.要文字强制--行内显示 除非遇到br*/
white-space: nowrap;
/*2.溢出隐藏*/
overflow: hidden;
/*3.文字溢出 用省略号替代*/
/*text-overflow: clip;*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
hi~来自星星的你-欢迎你的到来
</div>
</body>
</html>
运行结果：
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
