Hello,
I want to center a div right in the middle of the page, I tried top:30%, but when the window is resized off the alignment.
<div id=cent></div>
Thanks Jean
views:
109answers:
4
A:
<div id="content"
style="text-align: center;
vertical-align: middle;
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-top: 25%;
margin-bottom: 25%;">
hi
</div>
This worked for me...
Edit : This will align the whole div... regardless of the size of the div or the page... Assuming that this id the only div in the whole page...
SpikETidE
2010-03-23 06:48:00
I just need to align the div not the text
Jean
2010-03-23 06:48:51
+1
A:
If you know the height/width of that div (for instance, it will be 100px X 200px) then you can do it like this:
#cent {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
UPDATE: another option: see http://www.w3.org/Style/Examples/007/center (Centering vertically)
naivists
2010-03-23 06:48:01
And (http://www.w3schools.com/css/pr_class_display.asp) here they say that Good Ol' IE do not support most the atributes like table-cell etc...
SpikETidE
2010-03-23 07:06:01
Yes, W3Schools say it, but I am watching this page: http://www.w3.org/Style/Examples/007/center-example.html with IE8 and it works perfectly ;-) According to QuirksMode.org, which I trust more than W3Schools, you have to force "IE8 as IE8" mode to make it work: http://www.quirksmode.org/css/display.html
naivists
2010-03-23 07:08:50
IE8 is not "Good Ol' IE".. IE >= 7 already supports a lot, but IE6 is still a problem for a lot of people.
poke
2010-03-23 07:22:10
Note that you can't use 100% height on table-cell. Please see more details on my answer.
syockit
2010-08-03 21:06:02
A:
Adding notes to naivists' link (to w3c tips site):
display:table-cell does not work with height:100%. So, if you want to vertically center an element, which you don't know its height, on a page, you need to put it inside a container with display:table and height:100%, and another container with display:table-cell and vertical-align:middle.
Furthermore, if you want to center it horizontally, you need to specify width:100% to body, the outer container, and give text-align:center to inner container. The content should have display:inline-block, and to reset alignment, text-align:left.
Ultimately, it becomes as follows:
<style>
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
</style>
<body>
<div id="vcontainer"><div id="hcontainer">
<div id="content">
Hoyjo!<br>
I have returned to my hometown!<br>
Lolololo lololo lololo lololo lololo!<br>
</div>
</div></div>
</body>
I cannot guarantee it will work on legacy browsers (IE6/7). It will work on IE8 provided it runs on IE8 standards (yes, this will screw your mind. Thanks, MS!), and you must give <html> and <body> the height:100%.
syockit
2010-08-03 22:18:47
A:
Here's how:
#cent
{
margin-left:50px;
margin-right:50px;
}
Now your div is going to be 50px from left and right and centered in whatever container you have it in.
Sergio Tapia
2010-08-03 22:21:50