我有一个 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>
最佳答案
我认为 display: table-cell; 的行为是填充任何 display: table; parent。
编辑:
通过在 jsfiddle 上修改你的代码来确认这一点。
我对您的建议是使用绝对定位使容器 div 在页面中居中，并在内部 div 上使用 display: table-cell; 来实现垂直对齐。
关于html - 无法定义显示 :table-cell 的 DIv 的高度或宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5532696/