正在对齐JSX中标记中的文本

Aligning text in th tag in JSX

本文关键字：文本 对齐 JSX      更新时间：2023-09-26

我正在尝试将文本放在th标记的中心，在我的示例中它运行良好：http://codepen.io/p-adams/pen/qNxZBV但是，如果我在浏览器（Firefox）中查看代码，<th>标记中的文本不会居中。我不确定这是否与浏览器有关。我有一些基本的造型：

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

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

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

您需要找到任何覆盖您的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/

您还可以添加一个！文本对齐后很重要。这将给予它更高的优先级。例如：

table th {
         color: #000 !important;
}
相关文章：