? 个人简介
- ? 作者简介：大家好，我是阿牛?
- ? 个人主页：馆主阿牛?
- ? 支持我：点赞?+收藏??+留言?
- ? 系列专栏：css?
- ?格言：迄今所有人生都大写着失败，但不妨碍我继续向前！?
上期传送门：
?css中的选择器
?css盒子模型及其实战案例（上）
?css盒子模型及其实战案例（下）
?css网页布局之浮动及其实战案例（超详细）
?css中的定位详解
?css中元素的显示与隐藏
?我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧
?css三角的做法及其案例
?css布局技巧-css三角巧妙运用
?css布局技巧-文字围绕浮动元素巧妙运用
?css布局技巧-margin负值巧妙运用
?css布局技巧-行内块元素的巧妙运用
目录
-
- ? 个人简介
- vertical-align 属性应用
-
- 图片、表单和文字对齐
-
- 案例
- 解决图片底部默认空白缝隙问题
-
- 案例
vertical-align 属性应用
css的 vertical - align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：vertical-align : baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐， |
| middle | 把此元素放置在父元素的中部， |
| bottom | 把元素的底端与行中最低的元素的底端对齐。 |
看下图就很清晰了：
图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical - align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical - align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{
width:200px;height: 50px;}.box img{
width:100px;vertical-align: middle;}</style>
</head>
<body><div class="box"><img src="123.jpg" alt=""> 阿牛</div>
</body>
</html>
解决图片底部默认空白缝隙问题
bug ：上面代码图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
- 给图片添加 vertical - align：middle | top | bottom ；等。（提倡使用的）
- 把图片转换为块级元素 display : block ;
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{
border: 2px solid red;}</style>
</head>
<body><div class="box"><img src="300.jpg" alt="" style="vertical-align: bottom;"> </div>
</body>
</html>
