a | img | span 等内联标签、内联块放在一起时的水平方向中线轴对齐
1、vertical-align 属性设置元素的垂直对齐方式。
* vertical-align: top // 把元素的顶端与行中最高元素的顶端对齐
* vertical-align: text-top // 把元素的顶端与父元素字体的顶端对齐
* vertical-align: middle // 把此元素放置在父元素的中部。
* vertical-align: bottom // 把元素的顶端与行中最低的元素的顶端对齐。
* ertical-align: text-bottom // 把元素的底端与父元素字体的底端对齐。
~~~
input{
height: 50px;
}
img{
vertical-align: top
}
~~~
2、使用定位，给父元素设置相对定位，子元素设置绝对定位，通过调整子元素的top和left属性使其达到效果
~~~
.parent{
position: relative;
height: 50px;
}
.child1{
line-heigt: 50px;
}
.child2{
position: absolute;
top: 20px;
left: 80px;
}
~~~
3、使用浮动，这种情况只适用于两个元素的高度相同时
~~~
.child1{
float: left;
height: 50px;
}
.child2{
float: left;
height: 50px;
}
~~~
