如何在“
HTML”表的第一列和第三列中居中“ABC”和“ABCDEFGHIJ”文本？我尝试了HTML标签text-align,但我认为翻译阻止了这种对齐.
td.rotate div {
transform: translate(68px,55px) rotate(270deg);
white-space: nowrap;
height: 150px;
translate-origin: left top;
width: 25px;
text-align: center;
}
<table border="2px">
<tr>
<td class="rotate">
<div>ABC</div>
</td>
<td>123</td>
<td class="rotate">
<div>ABCDEFGHIJ</div>
</td>
</tr>
</table>
解决方法
你可以使用这个神奇的片段来完全控制所有内容：
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
它也适用于这种情况.子div将具有position：absolute,所以我们必须设置position：parent相对于parent,因此它们相对于它定位,而且parent也需要设置width和height,因为内容不会再自动设置它.
td.rotate {
position: relative;
height: 150px;
width: 15px;
}
td.rotate div {
transform: translate(-50%,-50%) rotate(270deg);
white-space: nowrap;
top: 50%;
left: 50%;
position: absolute;
text-align: center;
}
<table border="2px">
<tr>
<td class="rotate">
<div>ABC</div>
</td>
<td>123</td>
<td class="rotate">
<div>ABCDEFGHIJ</div>
</td>
</tr>
</table>
