button 里面的文字换行后位置会浮动

最近做项目按钮里面的文字需要换行但是换行后发现按钮的位置不能对齐了

在网上找了许久之后终于找到了解决方法

<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>

  效果

当代码改为

<button  style="width:50px;height:100px;"> jian guo men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian  men</button>
<button  style="width:50px;height:100px;"> jian guo men</button>
<button  style="width:50px;height:100px;"> jian guo men</button>
<button  style="width:50px;height:100px;"> jian guo men</button>
<button  style="width:50px;height:100px;"> jian guo men</button>

效果为：

解决方法

<style>
button{
 vertical-align: middle;  
}
</style>

添加次样式即可