图片样式-垂直对齐中有语法vertical-align:关键字;关键字取top,middle,bottom,baseline表示顶部/中部/底部/基线对齐。那bottom,baseline的区别是什么？
底部与基线的区别：底部就是行中最低的元素的底部，基线就是小写字母x的底部。
如下图，我标记的那个蓝线就代表图片对齐的准线：
生成此图的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{ width: 23px; height: 23px; }
#img1{ vertical-align: bottom; }
#img2{ vertical-align: baseline; }
</style>
</head>
<body>
测试字母:afg|βx<img id="img1" src="img/tao.png" alt=""/>bottom
<hr/>
测试字母:afg|βx<img id="img2" src="img/tao.png" alt=""/>baseline
<hr/>
</body>
</html>
扫一扫
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
