Vue.js - 如何对齐表头标题和行？答案

【问题标题】：Vue.js - How to align the table header titles and the rows?Vue.js - 如何对齐表头标题和行？
【发布时间】：2021-10-05 21:44:47
【问题描述】：

Image

我正在尝试将表格标题与表格内容对齐。任何人都知道做到这一点的最佳方法 - 我已经尝试了 2 个小时，但没有任何结果。

编辑：代码是here，如果有人想看看...

这是列标题的 CSS

.column-header {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  font-family: Poppins, sans-serif;
  text-decoration: none;
  width: 400px;
  padding: 10px 10px 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin: 5px;
  transition: all 0.4s ease-in;
}

这是表格行的 CSS

font-weight: 700;
  font-size: 20px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 10px;
  border-radius: 10px;
  width: 100%;
  min-height: 60px;
}

【问题讨论】：

文本对齐：居中；或向我们展示 HTML + 所有 CSS 文件
它是一个基于 Vue 构建的登录页面。 bitbucket.spotlightsportsgroup.com/projects/ICS/repos/…
有没有可以试一试的演示？ :)
@Parker 您提供的 URL 对我不起作用。
请在您的问题中添加 HTMl，您的 Bitbucket URL 无法访问How to Ask。如果您可以在此处发布您的 HTML，那就太好了

标签： html css vue.js flexbox

【解决方案1】：

从 Html 中选择 td 和 th 标签并将 text-align: center; 添加到 CSS 中，这将使整个标题及其内容进入中心。

【讨论】：

【解决方案2】：

您可以将text-align: center; 添加到column-header 类中。

【讨论】：