gpt4 book ai didi

html - 在容器 div 内垂直对齐表格

转载 作者:行者123 更新时间:2023-11-28 02:07:22 25 4
gpt4 key购买 nike

我正在尝试在父 div 中对齐动态大小的表格。父容器的高度已设置,内表的高度未知(可变)。我认为边距/相对定位调整不会起作用,因为表格的大小是未知的。这可以做到吗?现在代码如下所示:

html:

<div id="wrapper">
<div id="board">
<table id="evolve">...</table>
</div>
</div>

CSS:

#wrapper {
width: 100%;
height: 100%;
}
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
margin: auto;
position: relative;
}

最佳答案

你想要的CSS代码

#board {
display:table-cell;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border:solid 1px black;
}

更新您将需要根据包装器宽度更改 padding-left(如果将其设置为 100% 则它将起作用)

#wrapper {
height: 100%;
padding-left:36%;
}
#board {
display:table-cell;
width: 265px;
height: 222px;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
}

一旦我找到更好的解决方案,我会尽快更新它

关于html - 在容器 div 内垂直对齐表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10612712/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com