说明
- CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐
-
官方解释:用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align:baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
vertical-align: middle;
}
textarea {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="image/img.jpg"/> pink老师
<br >
<textarea cols="30" rows="10"></textarea> pink老师
</body>
</html>
- 图片、表单都属于行内块元素，默认的vertical-align是基线对齐。
-
vertical-align 属性应用 - 此时可以给图片、表单这些行内块元素的vertical-align 属性设置为middle 就可以让文字和图片垂直居中对齐了。
解决图片底部默认空白缝隙问题
bug：图片底册会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
border: 2px solid #0072C6;
}
</style>
</head>
<body>
<div><img src="image/ldh.jpg" alt=""/></div>
</body>
</html>
主要解决方法有两种：
1,给图片添加vertical-align:top | middle | bottom等。(提倡使用的)
2,把图片转换为块级元素display:block;
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
border: 2px solid #0072C6;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div><img src="image/ldh.jpg" alt=""/></div>
</body>
</html>