如何让图片相对于文字居中

##如何让图片相对于文字居中
html

 <div class="box">
        <span>1.点击耙子</span>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1138905358,3921744522&fm=26&gp=0.jpg" />           
        <span>即可在庄园开垦</span>
 </div>

style

.box{
            width: 370px;
            height: 50px;
            line-height: 50px;
        }
.box img{
            width: 50px;
            height: 50px;
            vertical-align: middle;
         }

第一次尝试，希望不会出问题