Html div中的按钮因文本内容而呈现不同

我在一个div中有四个100*100px大小的按钮。但是，它们的位置因其文本内容而异

这是html：

备忘录演示
钮扣{
高度：100px；
宽度：100px；
}
X
X
X

为了对齐按钮，您应该尝试使用a

下面是一个

float:left


按钮{
高度：100px；
宽度：100px；
浮动：左；
}

X
X
X
您可以为一小部分空白添加

或

您可以使用
垂直对齐：中间


按钮{
高度：100px；
宽度：100px；
垂直对齐：中间对齐；
}

X
X
X
您可以在
按钮文件夹上使用
显示：flex
。它在Firefox和Chrome中对我有效


#按钮夹{
显示器：flex
}
钮扣{
高度：100px；
宽度：100px；
}

X
X
X
默认情况下，按钮沿其最后一行文本对齐（“基线”，与
内联块
元素相同）。如果没有文本，则使用底部边框，这发生在代码段中。要更改此设置，您可以使用
垂直对齐
，
顶部
，
底部
或
中间
，任何最适合您特定情况的选项：


按钮{
垂直对齐：顶部；
}

备忘录演示
钮扣{
高度：100px；
宽度：100px；
}
X
X
X
< /代码>为按钮设置垂直对齐属性…我会考虑使用<代码>基线<代码>某处，因为它是主要问题，因为它是默认对齐方式，谢谢解释！