CSS vertical-align
2018-12-12 本文已影响15人
roy_pub
块级元素集中对齐： margin: 0 auto;
文本居中对齐：text-align: center;
可以使用 vertical-align 控制图片和文字的垂直关系，默认图片和文字基线对齐。
vertical-align不影响块级元素的对齐，只针对行内元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div>
<img src="images/taobao.jpg" height="280" width="520"/>
Hello World
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="images/taobao.jpg" height="280" width="520"/>
Hello World
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
vertical-align: top;
}
</style>
</head>
<body>
<div>
<img src="images/taobao.jpg" height="280" width="520"/>
Hello World
</div>
</body>
</html>
添加边框的时候，下面有间隔，是因为 veritical-align 默认是与基线对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<img src="images/taobao.jpg" height="280" width="520"/>
Hello World
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
vertical-align: bottom;
}
div {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<img src="images/taobao.jpg" height="280" width="520"/>
Hello World
</div>
</body>
</html>
