html - 在表格内水平居中文本

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>并且很可能继承了不同的东西。