浮动后，实现标签内块级元素和行内元素的水平对齐

这是代码
<body>
<div class="head">
<div class="FirstContent">
<image src="../girl_145.jpg" class="firstimage"></image>
<text class="firsttext">这几个字不能与图片对齐</text>
</div>
<div class="SecondContent">
<image src="../girl_145.jpg" class="secondimage"></image>
<text class="secondtext">这几个字不能与图片对齐</text>
</div>
</div>
</body>
这是样式
<style>
.head{
width: 600px;
}
.FirstContent{
float:left;
background-color:yellow;
}
.SecondContent{
float:right;
}
.FirstContent .firstimage,.SecondContent .secondimage{
width: 50px;
height: 50px;
display:inline;
}
.FirstContent .firsttext{
font-size:10px;
background-color: skyblue;
height:50px;
width:150px;
}
.SecondContent .secondtext{
font-size:10px;
background-color: skyblue;
width:200px;
height:50px;
}
</style>
这是一侧的效果