css对齐文本的绝对td

我有一个表margin: 0 auto;风格把它放在外部div的中心。有了这个技巧，如果表格的宽度发生了变化，表格的内容将被移动，以便将表格保留在div的中心，这是我不想发生的事情。
css对齐文本的绝对td

<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;此列，以避免它改变了表的宽度。但是，当我将它的位置设置为绝对位置后，对齐函数不再有效。
正如你可以从上面的打印屏幕上看到，它对准td而不是默认的center之上，任何人对如何使一个绝对的理念内容定位td？

来源

2017-08-17 Newbie

'垂直对齐：center'是一个错误。 –

那么解决方案是什么？ @MrLister – Newbie

'vertical-align：middle'。但是我理解这个问题的方式（如果我错了，最好通过显示更多代码来纠正我的错误）是解决方案是不使用绝对定位，而是将'table-layout'设置为'fixed'并给每个列明确的宽度。 –

为什么不给表格添加一个固定的宽度然后让它溢出？

无论如何，这不是什么好印刷术，但如果这是你想要的，然后为你的colspan =“2”行创建一个类。

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

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

大约为中心的东西更多阅读： https://www.w3.org/Style/Examples/007/center.en.html

来源

2017-08-17 08:07:07

这不起作用，它将元素移动到屏幕的中心而不是'td'。顺便说一句，如何修复表宽度，让它溢出？ – Newbie

您需要在您的p：行中添加'position：relative'，以便您的绝对元素不会转义它。对于表格宽度，只需将“max-width：500px”或其他任何内容添加到您的p：行。溢出将自动发生。用css类而不是使用style属性来做到这一点。 –

css对齐文本的绝对td

回答

相关问题