我有一个表格,其中一些单元格具有足够的文本内容,因此需要滚动,而某些单元格的内容仅占用一行文本。问题是,我需要在用例中使用div,并且在保持可滚动单元格正常工作的同时,似乎无法使文本垂直居中。
这是我的HTML和CSS
th{
border: black 5px solid;
}
th div{
overflow-y: auto;
padding: 5px;
width: 125px;
height: 125px;
}
th div p{
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<tr>
<th>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem a rerum alias labore, sed dolorum
at debitis sint tenetur velit fugit officiis id eos provident quae ipsum ea? Doloremque,
quaerat?</p>
</div>
</th>
<th>
<div>
<p>lorem ipsum</p>
</div>
</th>
</tr>
</table>
</body>
</html>
我尝试使用
display: flex;
align-items: center;
在div中,但这会使可滚动div的顶部隐藏在单元格顶部上方...
如何更改CSS以统一允许单行单元格垂直居中,但可滚动单元格以它们现在的方式工作?
使用现有的CSS和HTML,只需尝试添加以下内容:
th div {
display: flex;
}
th div p {
margin: auto;
}
这将起作用!如果您不希望文本水平居中:
th div p {
margin: auto 0;
}
th{
border: black 5px solid;
}
th div{
overflow-y: auto;
padding: 5px;
width: 125px;
height: 125px;
display: flex;
}
th div p{
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<tr>
<th>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem a rerum alias labore, sed dolorum
at debitis sint tenetur velit fugit officiis id eos provident quae ipsum ea? Doloremque,
quaerat?</p>
</div>
</th>
<th>
<div>
<p>lorem ipsum</p>
</div>
</th>
</tr>
</table>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句