如何在 HTML/CSS 中居中文本

Question

Does anyone know why my top row is not center? I have attached the picture of my table for reference. The Product Sales headings are not center. In my html code you only need to pay attention to header-cell div class as that is where I wrote code for the top row. I tried all the centering techniques I know in the CSS file but none seem to work. Any help would be appreciated!

 .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

Your table structure is very wrong structured. F.ex.a tr is not a child of a div, but either thead, tbody, tfoot or the table it self. Don't mix td and th. th is for thead and td is for tbody and 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