在表格内水平居中文本

Question

在 colspan 大于 1 的 TD 中，我无法让文本居中，我已经为每个标签添加了文本对齐中心，但什么也没有。

HTML：（我删除了所有不居中的项目，但留下了与此文本相关的所有标签）

div.OBJ {
  display: table-cell;
  text-align: center;
}
div.scroll {
  width: 100%;
  height: 600px;
  overflow-y: scroll;
  overflow-x: auto;
  text-align: center;
}
td {
  text-align: center;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  align: center;
  text-align: center;
}
a:link {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:visited {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: #ff0000;
  text-decoration: underline;
  text-align: center;
}
div {
  text-align: center;
}
span {
  text-align: center;
}

<div class="scroll">
  <table border="1" style="width:100%">
    <tr id="{{ParentObject.id}}">
      <td id="{{ParentObject.id}}" colspan="{{object.size}}" style="background-color:{{object.bgColor}}" data-begin="{{object.begin}}" data-end="{{object.end}}">
        {% multiply object.size colWidth as colSize %}
        <div id="{{object.id}}" class="OBJ" style="width:{{colSize}}%">
          <a id="{{object.id}}" href="link" title="hover text">
            <span id="{{object.id}}" class="object">
                            {{object.name}}
                        </span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 1

你的问题是：

div.OBJ {
        display: table-cell;
        text-align: center;
    }

display: table-cell 让元素表现得像 <td> 并且很可能继承了不同的东西。

Answer 2

问题是你有div.OBJ 包含display: table-cell。以下是它被移除的样子：

div.OBJ {
  text-align: center;
}
div.scroll {
  width: 100%;
  height: 600px;
  overflow-y: scroll;
  overflow-x: auto;
  text-align: center;
}
td {
  text-align: center;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  align: center;
  text-align: center;
}
a:link {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:visited {
  color: #000000;
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: #ff0000;
  text-decoration: underline;
  text-align: center;
}
div {
  text-align: center;
}
span {
  text-align: center;
}

<div class="scroll">
  <table border="1" style="width:100%">
    <tr id="{{ParentObject.id}}">
      <td id="{{ParentObject.id}}" colspan="{{object.size}}" style="background-color:{{object.bgColor}}" data-begin="{{object.begin}}" data-end="{{object.end}}">
        {% multiply object.size colWidth as colSize %}
        <div id="{{object.id}}" class="OBJ" style="width:{{colSize}}%">
          <a id="{{object.id}}" href="link" title="hover text">
            <span id="{{object.id}}" class="object">
                            {{object.name}}
                        </span>
          </a>
        </div>
      </td>
    </tr>
  </table>
</div>