在表格内水平居中文本

Posted 2023-03-05

【中文标题】在表格内水平居中文本

【英文标题】：Horizontally Centering text inside a table

【发布时间】：2015-09-28 10:10:56

【问题描述】：

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

【问题讨论】：

center text of table data connected with colspan="2" with .css " Select td with attribute colspan="2" " 的可能重复项

尝试添加div margin:auto;，因为上面设置了宽度。

可能的重复没有帮助，因为我正在使用 Django 使 colspans 的宽度可变。 @杰森

@Pangloss 不起作用

【参考方案1】：

你的问题是：

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

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

【讨论】：

当我删除它时，它会将所有内容恢复到左中心，除了 colspan 大于 1 的那些。那些移近中心但有时离中心很远。

使用!IMPORTANT decleration

【参考方案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>

【讨论】：

我删除了显示：table-cell 它有点（它们在中心的左侧）将超过一列的 TD 中的文本居中，但一列的文本现在左对齐。 @analytalica