如何在 HTML/CSS 中将文本居中

Question

有谁知道为什么我的第一行不居中？我附上了我的 table 的照片以供参考。 Product Sales 标题不居中。在我的 html 代码中，您只需要注意 header-cell div class 因为这是我为第一行编写代码的地方。我在 CSS 文件中尝试了所有我知道的居中技术，但 none 似乎有效。如有任何帮助，我们将不胜感激！

.single-cell {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
}

.header-cell {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

table,
th,
td {
  border: 1px solid lightgray;
  border-collapse: collapse;
  text-align: center;
  vertical-align: middle;
}

<table>
  <tr>
    <div class="header-cell">
      <tr>
        <b>Month</b>
      </tr>
    </div>
    <th *ngFor="let p of products">
      <div class="header-cell">
        <tr>
          <b>{{ p.salesLabel }}</b>
        </tr>
      </div>
    </th>
  </tr>
  <tr></tr>
  <tr>
    <td>1</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>2</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>3</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>4</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>5</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>6</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>7</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>8</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>9</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>10</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>11</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
  <tr>
    <td>12</td>
    <th *ngFor="let p of products">
      <div class="single-cell">
        <tr>
          <input style="border: none" type="text" name="cogs-label" />
        </tr>
      </div>
    </th>
  </tr>
</table>

Answer 1

您的 table 结构非常错误。 F.ex。 tr 不是 div 的子节点，而是 thead、tbody、tfoot 或 table 本身。不要混用 td 和 th。 th 用于 thead，td 用于 tbody 和 tfoot。

table {
  border-collapse: collapse;
  width: 100%;
}

table,
th,
td {
  border: 1px solid lightgray;
}

th,
td {
  text-align: center;
  vertical-align: middle;
}

<table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Product 1 Sales</th>
        <th>Product 2 Sales</th>
        <th>Product 3 Sales</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>4</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>6</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>7</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>8</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>9</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>10</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>11</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>12</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

How to create a table

如何在 HTML/CSS 中将文本居中

How do I center text in HTML/CSS

html

css

html-table

center

text-align