设置元素的垂直方向对齐方式
vertical-align 相关注意点
text-align 是设置给需要对齐元素的父元素 vertical-align 是设置给需要对齐的那个元素本身 vertical-align 只对行内元素有效
默认情况下图片和一行文字的基线对齐,基线就是一行文字中最短那个文字的底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
background: skyblue;
font-size: 40px;
margin: 200px auto;
line-height: 100px;
}
img{
/*
vertical-align: baseline;
vertical-align: top;
vertical-align: bottom;
vertical-align: text-top;
vertical-align: text-bottom;
*/
vertical-align: middle;
}
</style>
</head>
<body>
<div>BNTang<img src="images/dog.jpg" alt=""></div>
</body>
</html>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。