在表格内水平居中文本

Question

我无法将文本置于具有大于1的colspan的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。以下是它的外观删除方式：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;