css 对齐绝对 td 的文本

Question

我有一个样式为 margin: 0 auto; 的表格，将其放在外部 div 的中心。使用这个技巧，如果表格的宽度发生变化，表格的内容将被移动以使表格保持在 div 的中心，这是我不希望发生的事情。

<p:row>
    <p:column>
        <p:outputLabel for="moduleTitle" value="Module Title: " />
    </p:column>
    <p:column colspan="2" style="vertical-align: central; position: absolute;">
        <p:outputLabel id="moduleTitle" value="#{classroomBean.classroom.module.moduleTitle}"/>
    </p:column>
</p:row>

表格的第 1 行第 2 列具有动态值，因此我将 position: absolute; 设置到此列以避免它改变表格的宽度。但是当我把它的position设置为absolute后，align函数就不起作用了。
从上面的打印屏幕可以看出，它对齐顶部 td 而不是默认的 center ，任何人都知道如何对齐绝对定位的 的内容>td?

Answer 1

为什么不直接给表格加上一个固定的宽度，然后让它溢出呢？

无论如何，你正在做的并不是很好的排版，但如果这是你想要的，那么为你的 colspan="2"行创建一个类。

position: absolute;
top: 50%;
transform: translate(0, -50%);

它将元素向下移动 50%，然后再次向上移动元素高度的一半宽度。

更多关于居中的阅读: https://www.w3.org/Style/Examples/007/center.en.html