css要注意的细节问题--vartical

1：如何使同一个div中的图片和input框在同一行上？

<div class="vote" style="border:1px solid red;">
<input type="text" style="height:0.5rem;width: 1.5rem;line-height: 0.7rem;border: 0.02rem solid #a5de37;margin-left: 0.7rem;padding-left: 0.1rem;
vertical-align: middle;" name="verity" placeholder="请输入验证码">    //这里设置input和img和button都为vertical-align:middle即可
<img style="width: 1rem;height: 0.5rem;border:1px solid red;
vertical-align: middle;margin-left:10px;margin-right:10px;" src="/index.php/Sheying/random">
<button id="vote" style="cursor:no-drop;background-color:rgb(0, 240, 240);height:0.54rem;width:1.5rem;
vertical-align: middle;" data-id="1">已投票</button>
</div>

2：了解vertical-align的属性？

包括Baseline | middle |bottom|Text-bottom|Text-top|sub|bottom

Baseline:图片(内含文字)和文字以文字基准对准对齐

middle:以文字最下方为基线对齐

sub和bottom:指上标和小标

参考：http://www.cnblogs.com/hejia/archive/2012/12/31/2840227.html