javascript - 文字较长时按钮会移动

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

内联元素的默认垂直对齐方式是基线，这就是你看到的。