F1Fan Posted October 17, 2008 Share Posted October 17, 2008 I'm really trying to stop using tables, but I can't seem to get vertical-align to do anything. I have a loading div that covers the whole page. I am trying to have the 300px by 150px div be centered vertically and horizontally. Any help is appreciated. <div id="pleasewait" style="vertical-align:middle;width:100%;height:100%;background-color:#000000;cursor:wait;display:block;z-index:1;position:fixed;left:0px;top:0px;"> <div style="height:auto;"> </div> <div style="margin:auto auto auto auto;text-align:center;border: solid 1px black;background-color:#FFFFFF;font-weight:bold;width:300px;height:150px;"> Please wait...<br><br> <image src="images/pleasewait.gif"> </div> </div> Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 17, 2008 Share Posted October 17, 2008 This is untested but should work..... margin auto auto auto auto:?did that do anything ive never thought of that <div id="pleasewait" style="vertical-align:middle;width:100%;height:100%;background-color:#000000;cursor:wait;display:block;z-index:1;position:fixed;left:0px;top:0px;"> <div style="height:auto;"> </div> <div style="margin:o auto;vertical-align:middle:text-align:center;border: solid 1px black;background-color:#FFFFFF;font-weight:bold;width:300px;height:150px;"> Please wait...<br><br> <image src="images/pleasewait.gif"> </div> </div> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 17, 2008 Author Share Posted October 17, 2008 Nope, tried that. Thanks anyway. Any other ideas? Quote Link to comment Share on other sites More sharing options...
ifubad Posted October 17, 2008 Share Posted October 17, 2008 There is no easy way to center an element vertically. You need to use position and top, or using margin or padding to move the container up or down. Would be nice is w3c comes up with a solution. Quote Link to comment Share on other sites More sharing options...
JasonLewis Posted October 17, 2008 Share Posted October 17, 2008 You can only use vertical-align if the display is set to something like table-cell. But then IE doesn't support it. If you want to center something in CSS then you need to use this method, just scroll down to the one that has the title about no hacks. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 18, 2008 Share Posted October 18, 2008 The actual old html 3.0 element - vertical-align - only works within table cells. DropFaith was on the right track. To center a block level select you must, first, always give it a width smaller than its parent select, then use margin:0 auto. What it needs is to use auto to calculate left and right margins in order to center within a parent element. It obviously will not work on a floated or absolute positioned element. You had used the letter o instead of the "number" zero "0". Position:fixed is also not advised since it, too, is not cross-browser compatible. z-index:1;position:fixed;left:0px;top:0px; is wasted since you already have width and height at 100% for the main select. "cursor:wait;" this is a dhtml or ajax only element not css. Setting the cursor in CSS is not cross-browser compatible. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.