带有两行文本的HTML元素被下推

Question

我正在使用HTML和CSS的简单菜单。 我当前的代码：

.menu{
	width: 100%;
	text-align: center;
}
.menu-button{
	display: inline-flex;
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.8);
	color: #e0e0e0;
	padding: 12px 0;
	margin: 8px;
  width: 150px;
	height: 150px;
	font-size: 36px;
}
.menu-button span{
	margin: auto;
}

<div class="menu">
		<a href="" class="menu-button"><span>2 lines of text</span></a>
		<a href="" class="menu-button"><span>btn 2</span></a>
		<a href="" class="menu-button"><span>btn 3</span></a>
		<a href="" class="menu-button"><span>btn 4</span></a>
		<a href="" class="menu-button"><span>btn 5</span></a>
		<a href="" class="menu-button"><span>btn 6</span></a>
</div>

几乎所有功能都可以正常工作，但是将第一项（带有2行文本）往下推几个像素。为什么会这样呢？我如何使其与该行中其余菜单按钮的高度相同？