我嘗試在不使用Flexbox 的情況下垂直對齊內容,因為我們的用例存在一些問題,所以我嘗試使用垂直對齊的表格來實現,但問題是裡面的內容沒有填充剩餘的高度,是否可以通過CSS以某種方式做到這一點?
https://jsfiddle.net/s38haqm5/25/
<html> <body> <div class="row"> <div class="cell"> <div class="container"> Hello world </div> </div> <div class="cella"> Cell2 </div> </div> </body> </html> .container { background-color: red; height: 100%; } .cell { display: table-cell; vertical-align: middle; border: 1px solid black; min-width: 100px; max-width: 100px; min-height: auto; max-height: none; } .cella { display: table-cell; vertical-align: middle; border: 1px solid black; min-width: 100px; max-width: 100px; height: 30px; max-height: none; } .row { display: table }
P粉1830770972024-04-05 10:41:43
您需要定義父級高度。現在您的 .cell
沒有設定任何高度,因此 .container
沒有任何值來計算 100%。
只需在.cell
中添加一些高度,例如.cell {height: 30px;}
(就像您在.cella
上的高度一樣。)
由於 .cella
和 .cell
相同,我假設您可能需要這一點建議。
如果您希望單元格相同,但其中一個單元格需要設定不同的樣式,請在所有單元格上添加相同的類,然後將id 添加到需要不同的單元格,然後根據您的需要設置id 的樣式想。請記住,具有 class 和 id 的單元格將具有由 class 和 id 組合而成的 css 值