如何在 HTML/CSS 中居中文本

问题描述

有谁知道为什么我的顶行不在中间？我附上了我的桌子的图片以供参考。产品销售标题不在中心。在我的 html 代码中，您只需要注意 header-cell div 类，因为这是我为第一行编写代码的地方。我在 CSS 文件中尝试了所有我知道的居中技术，但似乎都不起作用。任何帮助将不胜感激！

.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>

解决方法

你的表结构非常错误。 例如一个 tr 不是一个 div 的子元素，而是thead、tbody、tfoot 或它自身的表。 不要混用 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