td中绝对div中的中心文字怎么样？

Question

在我的项目中，有一个html表，每个td包含一个div。我必须将该div设置为适合td，所以我将td的位置设置为relative，div设置为绝对值。

请考虑下表及其风格：

＆＃13;

＆＃13;

table {
  width: 500px;
  height: 600px;
}
table td {
  position: relative;
}
table td div {
  position: absolute;
  backgroundcolor: red;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

＆＃13;

<table id="theTable">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>
      <div>a1</div>
    </td>
    <td>
      <div>b2</div>
    </td>
    <td>
      <div>c2</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>a2</div>
    </td>
    <td>
      <div>b2</div>
    </td>
    <td>
      <div>c2</div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

以上风格的表格非常适合满足我的预期。接下来，我想将绝对div中的文本设置为中心（垂直包含）。

所以我在互联网上发现它，大多数人都建议用display: table;样式给这个div。显然，它失败了:(

有人可以告诉我如何将这些文字集中在一起吗？

Answer 1

只需将text-align: center;添加到css table td div{ ... }

即可

实施例： https://jsfiddle.net/9kznm317/

Answer 2

您可以添加一些0-width inline-block元素并将其vertical-align设置为middle，如下面的代码所示：

table {
  width: 100%;
}
table td {
  position: relative;
  height: 100px;
}
table td div {
  position: absolute;
  background-color: red;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
table td div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  /* just for demo */
  border-left: 1px solid green;
}

<table id="theTable">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>
      <div>a1</div>
    </td>
    <td>
      <div>b2</div>
    </td>
    <td>
      <div>c2</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>a2</div>
    </td>
    <td>
      <div>b2</div>
    </td>
    <td>
      <div>c2</div>
    </td>
  </tr>
</table>

Answer 3

table{width:500px;height:600px;}
table td {
  position: relative;
  
}
table td div{
  background-color:red;
  position:relative;
  display: table;
  width: 100%;
  height: 100%;
}
table td div span {
 display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  width: 100%;
  
}

<table id="theTable">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td><div><span>a1</span></div></td>
    <td><div><span>b2</span></div></td>
    <td><div><span>c2</span></div></td>
  </tr>
  <tr>
    <td><div><span>a2</span></div></td>
    <td><div><span>b2</span></div></td>
    <td><div><span>c2</span></div></td>
  </tr>
</table>