javascript - 在 JSX 中对齐标签中的文本

Question

我试图将文本居中放置在我的 th 标签中，它在我的示例中运行良好:http://codepen.io/p-adams/pen/qNxZBV但是如果我在浏览器 (Firefox) 中查看我的代码，我的 <th> 中的文本标签不居中。我不确定这是否与浏览器有关。我有一些基本的样式:

th {
   border: 1px solid purple;
   width: 125px;
   text-align: center;
   padding: 10px;
}

然后在我渲染 table 的 ReactJS 组件中:

<table>
    <thead>
        <tr>
            <th>Course #</th>
            <th>Course name</th>
            <th>Credit hours</th>
            <th>Time</th>
            <th>Days</th>
            <th>Seats available</th>
        </tr>
    </thead>
    <tbody>
        {details}
    </tbody>
</table>

Answer 1

您需要找到覆盖您的 CSS 规则的任何内容，然后重写您的规则，使其比您找到的规则更具体。例如，您可以将选择器更改为:

html body table th {
   border: 1px solid purple;
   width: 125px;
   text-align: center;
   padding: 10px;
}

看看浏览器如何决定哪些规则最相关 - https://developer.mozilla.org/en/docs/Web/CSS/Specificity

作为最后的手段，您可以将 !important 添加到 text-align 声明中。但这将使以后更难覆盖规则 - https://css-tricks.com/when-using-important-is-the-right-choice/