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;设置为此列以避免更改表的宽度。但在我将其位置设置为绝对位置后，对齐功能不再起作用。
正如您从上面的打印屏幕中看到的那样，它对齐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