HTML按钮内图标与文字上下居中布局问题求助

不用table布局，改用Flexbox就能轻松实现图标在上、文字在下且均水平居中的效果，同时解决适配问题：

优化后的代码 #

HTML部分：

<button class="button_1" @onclick="Read_Error_Log">
  <div class="button-content">
    <RadzenIcon Icon="icon1" class="rzi-header" />
    <span>Error Log</span>
  </div>
</button>

CSS部分：

/* 修正原代码问题，用Flex实现布局 */
.button_1 {
  min-width: 100px;
  max-width: 100px;
  height: 70px;
  background-color: #ffffff;
  border: 1px solid #aed6f1;
  border-radius: 5px;
  font-size: 13px;
  color: #212f3c;
  outline-color: ActiveBorder;
  /* 启用Flex布局，垂直排列内部元素并整体居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0; /* 移除多余padding避免错位 */
}

.button-content {
  text-align: center; /* 确保文字水平居中 */
}

.rzi-header {
  font-size: 40px !important;
  margin-bottom: 4px; /* 给图标和文字添加间距 */
}

原代码问题说明 #

1. CSS中button_row1和button_row2缺少.前缀，属于无效类选择器，样式未生效
2. table布局冗余且易引发适配问题，Flexbox是更适合这类垂直居中场景的现代布局方案
3. 按钮的padding-top会干扰内部元素居中位置，建议移除

内容的提问来源于stack exchange，提问作者Dargento