html - 为什么 table th 字体垂直居中在 css 中不起作用？

Question

我想设置表格的字体垂直居中，但是如果我在CSS中这样设置就没有效果:

.table-display th {
    height: 20px;
    font-size:13px;
    text-align:center;
    vertical-align:middle
}

html 是:

<table id="rule-table"  class="table table-display table-striped  jambo_table" border="1" style="margin-bottom: 5px">
        <thead>
            <tr class="headings">
                <th>Name</th>
......

但是如果我在html而不是css中设置vertical-align样式，它就生效了:

<table id="rule-table"  class="table table-display table-striped  jambo_table" border="1" style="margin-bottom: 5px">
        <thead>
            <tr class="headings">
                <th style="vertical-align:middle;">Name</th>
  ......

问题是什么？

Answer 1

您可以在 css 类中使用 !important 或尝试以下代码，

.table-display> thead> tr > th {
    height: 20px;
    font-size:13px;
    text-align:center;
    vertical-align:middle !important;
}