當文字很長時按鈕移動

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";。