如何根据其他列对齐文本 - 例如,根据两个右对齐列的可见部分居中



似乎人们投票否决了这个问题(或投票支持关闭它),没有阅读或不理解 - 所以我编辑了它以使其更清晰。

我有一个 HTML 表,其中包含两个右对齐的列和另一个"colspan"其他两个列的列。后者中的文本应在视觉上居中,以便结果类似于此示例中的第三行和第四行。

有没有办法根据带有 css 的其他列实现"居中"文本?

生成表格,从数据库中读取所有文本,列宽按百分比给出 - 我无法插入隐藏列或其他内容。我可以像在本例中尝试的那样将类添加到<td>标签中。

.centered { text-align : center; }
.guessed-center { text-align : center; padding-left: 16em; }
.right-aligned { text-align : right; }
<table width=100% border=1>
<tr><td class="centered" colspan=2>Text to be visually centered is too far to the left</td></tr>
<tr><td class="right-aligned">First text</td><td class="right-aligned">Second text</td></tr>
<tr><td class="guessed-center" colspan=2>Text to be visually centered is more correct</td></tr>
<tr><td class="right-aligned">1st</td><td class="right-aligned">2nd</td></tr>
</table>
<table width=50% border=1>
<tr><td class="centered" colspan=2>Text to be visually centered is too far to the left</td></tr>
<tr><td class="right-aligned">First text</td><td class="right-aligned">Second text</td></tr>
<tr><td class="guessed-center" colspan=2>Text to be visually centered is more correct</td></tr>
<tr><td class="right-aligned">1st</td><td class="right-aligned">2nd</td></tr>
</table>

如果我尝试使用一些padding-left,我可以设法获得一些固定屏幕宽度的结果,但是如果我调整窗口大小,(绝对)列宽将发生变化,文本将不再在视觉上居中,或者像示例布局一样甚至完全搞砸了。任何更复杂的 css 以获得所需结果的想法?

我认为这就是你要找的。我刚刚从.guessed-center中删除了 css 属性padding-left: 16em;

.centered { text-align : center; }
.guessed-center { text-align : center; }
.right-aligned { text-align : right; }

最新更新