当文字很长时按钮移动

Question

我创建了2个按钮，第一个是短文本，另一个是长文本，但是没有对齐。

如何在文本较长时对齐第二个按钮？

https://jsfiddle.net/ws2awc03/

var btn = document.createElement("button"); 
var btn2 = document.createElement("button"); 
var body = document.getElementsByTagName("body")[0]; 

btn.style.width = "200px"; 
btn.style.height = "150px"; 
btn.style.margin = "10px"; 
btn.innerHTML = "text"; 
body.appendChild(btn); 

btn2.style.width = "200px"; 
btn2.style.height = "150px"; 
btn.style.margin = "10px"; 
btn2.innerHTML = "text text text text text text text text text text text text text"; 
body.appendChild(btn2); 

*这是一个例子。真实案例有一个矩阵（10x7按钮）。

Answer 1

设置垂直对齐中间：内联元素

button { 
    vertical-align:middle; 
} 

jsFiddle example

默认垂直对齐方式为基准线，这是你看到了什么。

Answer 2

您拼错按钮2保证金：btn.style.margin = "10px";。
您可以定义父元素的行为，在这种情况下为body和body.style.display = "flex";。