Cannot define the height or width of a DIv set to display:table-cell
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开发者_如何学JAVA: 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>
I think the behaviour of display: table-cell; is to fill any display: table; parent.
EDIT:
Confirmed this by mucking around with your code on jsfiddle.
My suggestion to you would be to use absolute positioning to center the container div in the page, and use display: table-cell; on the inner div to get your vertical alignment.
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>
加载中,请稍侯......
精彩评论