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

回答

相關問題