无法定义设置为 display:table-cell 的 DIv 的高度或宽度
Posted
技术标签:
【中文标题】无法定义设置为 display:table-cell 的 DIv 的高度或宽度【英文标题】：Cannot define the height or width of a DIv set to display:table-cell 【发布时间】：2011-07-28 19:25:57 【问题描述】：我有一个 div 包裹在另一个 div 中。 父div设置为：
显示：表格
子div设置为
div:表格单元格
这是为了使某些文本垂直和水平居中。 但我还需要定义该文本的大小。这是因为 div 需要浮动在浏览器窗口的中心，而窗口本身也在一个长页面上。
我已经上传了一个截图来告诉你我的意思。
所以，这就是为什么我也需要定义表格单元格 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>
【问题讨论】：
【参考方案1】：答案如下：
我很惊讶这有多复杂，有人有更好的解决方案吗？
http://jsfiddle.net/2Z2BF/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Browser Centred Div Overlay - WITH Specified Width and Height</title>
<style type="text/css">
html,body
height:100%;
margin:0;
padding:0;
#stopTheOverlayFromAffectingTheContent
position: absolute;
width: 100%;
height: 100%;
#verticalFix
height:50%;
margin-top:-250px;
width:100%;
#horizontalFix
width:500px;
height:500px;
margin-left:auto;
margin-right:auto;
#myTable
background-color: aqua;
display: table;
width: 100%;
height: 100%
#myCell
display: table-cell;
text-align: center;
vertical-align: middle;
#contentBelow
height:3000px;
h1 color:#fff;margin:0;padding:0
</style>
</head>
<body>
<div id="stopTheOverlayFromAffectingTheContent">
<div id="verticalFix"></div>
<div id="horizontalFix">
<div id="myTable">
<div id="myCell">Lorem Ipsum</div>
</div>
</div>
</div>
<div id="contentBelow">DEVIL</div>
</body>
</html>
【讨论】：
【参考方案2】：我认为display: table-cell; 的行为是填充任何display: table; 父级。
编辑：
通过在 jsfiddle 上修改您的代码确认了这一点。
我对您的建议是使用绝对定位将容器 div 在页面中居中，并在内部 div 上使用display: table-cell; 来获得垂直对齐。
【讨论】：
但是我怎样才能定义我想要垂直和水平居中的东西的大小呢？ 嗯，如果你的意思是字面上只是添加 position:absolute;对父母来说，这似乎不起作用。你能澄清一下吗？非常感谢。以上是关于无法定义设置为 display:table-cell 的 DIv 的高度或宽度的主要内容，如果未能解决你的问题，请参考以下文章
UIButton wierdness：无法为自定义按钮类型设置标题
无法使用 animator() [ OSX ] 为 Swift 自定义属性设置动画