gpt4 book ai didi

html - 无法定义显示 :table-cell 的 DIv 的高度或宽度

转载 作者:可可西里 更新时间:2023-11-01 13:40:00 25 4
gpt4 key购买 nike

我有一个 div 包裹在另一个 div 中。父 div 设置为:

display:table

子div设置为

div:table-cell

这是为了让一些文本垂直和水平居中。但我还需要定义该文本的大小。这是因为 div 需要 float 在浏览器窗口的中心,而窗口本身也在一个长页面上。

我已经上传了一个屏幕截图来向您展示我的意思。

所以,这就是为什么我也需要定义我的表格单元格 div 的高度和宽度。它需要适合那个圈子。

我不知道为什么我不能设置这个表格单元格的高度或宽度。我还需要在 CSS 中执行此操作,而不是 jquery,因为这将是人们在页面加载时看到的第一件事,并且着陆页上会有很多内容。

我把代码放在这里: http://jsfiddle.net/Kpr9k/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div as Table-Cell Width/Height Mystery</title>
<style type="text/css">

body, html {
width:100%;
height: 100%;
background-color: gray;
margin: 0;
padding: 0;
}

#myTable {
margin: 0;
display: table;
width: 100%;
height: 100%;
border: 1px red solid;
}

#myCell {
display: table-cell;
max-height: 500px;
max-width: 500px;
min-height: 500px;
min-width: 500px;
height: 500px;
width: 500px;
text-align: center;
color: #000000;
line-height: 36px;
vertical-align: middle;
border: 1px yellow solid;
}

</style>
</head>

<body>
<div id="myTable">
<div id="myCell">I cannot define the width of a table cell and its driving me insane! The yellow border is the table-cell, however its been defined to be (min, max AND regular!!) as a 500px square.Instead, it's just defaulting to be 100%.</div>
</div>
</body>

</html>

table-cell-quandry

最佳答案

我认为 display: table-cell; 的行为是填充任何 display: table; parent。

编辑:

通过在 jsfiddle 上修改你的代码来确认这一点。

我对您的建议是使用绝对定位使容器 div 在页面中居中,并在内部 div 上使用 display: table-cell; 来实现垂直对齐。

关于html - 无法定义显示 :table-cell 的 DIv 的高度或宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5532696/

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