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;
}
~~~
