css - css对齐绝对td的文本

我有一个样式为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>

该表的第一行第二列具有动态值，因此我将position: absolute;设置为该列，以避免它更改表的宽度。但是，在将其位置设置为绝对位置之后，align函数不再起作用。


从上面的打印屏幕可以看到，它对齐td的顶部而不是默认的center，有人知道如何对齐绝对位置td的内容吗？

最佳答案

为什么不只是将固定宽度添加到表格，然后让表格溢出呢？

无论如何，这并不是一个很好的排版，但是如果您要这样做，则为colspan =“ 2”行创建一个类。

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

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

有关居中的更多信息：
https://www.w3.org/Style/Examples/007/center.en.html