当前位置：文江博客话题详情

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

发布于 2024-10-28 23:08:35 字数 1638 浏览 2 评论 0原文

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

原文

I have a div wrapped in another div.
The parent div is set to:

display:table

The child div is set to

div:table-cell

This is in order to vertically and horizontally centre some text.
But I aslo need to define the size of that text. This is becasue the div needs to float in the centre of the browser window, and the window itself is on a long page too.

I have uploaded a screenshot to show you what i mean.

So, this is why i need to define the height and width of my table-cell div too. It needs to fit within that circle.

I'm at a loss as to why i cant set the height or width of this table-cell.
I also need to do this in CSS, not jquery as it'll be the first thing that people see when the page loads, and there will be a lot of content on the landing page.

I've put the code here:
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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖兔^ω^ 2024-11-04 23:08:35

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

编辑：

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

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

回复收藏 0 原文

绅士风度i 2024-11-04 23:08:35

答案如下：

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

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>

Here is the answer:

I'm surprised by how complicated this was, anyone have a better solution?

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>

回复收藏 0 原文

~没有更多了~