CSS属性：vertical-align详解
文章推荐
Vertical-align属性
-
Vertical-align被用于垂直对齐inline元素，inline-block元素，以及inline-table的元素 inline元素基本上指的就是文本，inline-block元素基本上指图片，inline-table基本上指的表格
文字对齐
基本介绍
-
baseline：将元素x的基线与其父元素x的基线对齐 middle：将元素行高的中间与父对象x的基线对齐，再加上父对象的x高度的一半 top：将元素的顶部及其后代与整个行的顶部对齐 bottom：将元素的底部及其后代与整行的底部对齐 允许指定长度值和百分比值，在与基线对齐的基础上正值向上，负值向下
<style type="text/css">
div{
font-size: 100px;
border: 10px solid red;
}
span{
font-size: 20px;
border: black solid 5px;
/*vertical-align: baseline;*/
/*vertical-align: top;*/
/*vertical-align: middle;*/
/*vertical-align: bottom;*/
vertical-align: -100px;
}
</style>
<body>
<div>index
<span>xxx</span>
</div>
</body>
baseline对齐 middle对齐 top对齐
图片对齐
块元素中的图片
-
块元素中的图片默认与基线对齐，所以下面由空隙 只需要将Vertical-align的值改为非baseline，就可解决
图片与文字
