Question

我有另一个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>

table-cell-quandry

Answer 1

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

编辑：

通过在jsfiddle上使用你的代码来证实这一点。

我的建议是使用绝对定位将容器div置于页面中心，并使用内部div上的display: table-cell;来进行垂直对齐。

Answer 2

以下是答案：

我对这有多复杂感到惊讶，任何人都有更好的解决方案？

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>

无法定义要显示的DIv集的高度或宽度：table-cell

2 个答案: