Center an image w/text below

Im looking to see how I can center an image with text below it on a web page... Doesnt matter what screen resolution the user has, Id still like for it to be auto centered on their screen.  

Right now I have the image centered on my screen at a resolution of 1280x1024. However a user with a 800x600 needs to scroll down a little to see it all. It just needs to be bumped up alittle for it to be centered on their screen but when I do that it is way to high on my screen which doesnt looked centered.

Thanks!
janzalonAsked:
Who is Participating?
 
yessirnosirConnect With a Mentor Commented:
Hi again, I'm sure you're getting sick of hearing from me, but I just figured out a way to fix the problem with the top of the text disappearing when the window height is too small, at least in newer browsers.  You can put everything inside a DIV with a min-height property equal to the size of the block you are centering.  Have attached code example below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
body, html {margin:0;padding:0;height:100%;}
#container {position:relative;height:100%;min-height:480px;}
#center_both_ways {
width:600px;
height:480px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-240px;
text-align:center;
 
}
</style>
 
 
</head>
<body>
<div id="container"> 
<div id="center_both_ways">
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0" /></a>
      </div>
    </td>
  </tr>
</table>
 
 
 
<br />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
 
</div>
 
</div> 
</body>
 
</html>

Open in new window

0
 
raminhosCommented:
Try this:
<table width="100%" height="100%">
<tr>
<td align="center" valign="center">
image code here
</td>
</tr>
</table>

Open in new window

0
 
yessirnosirCommented:
another approach, if you want to use CSS, is to use position:absolute to locate the top left corner of your DIV at the center of the screen, and then use negative margins to move the DIV up and left.  Sample code below.  This only really works if you have a fixed layout, so that you can calculate the correct negative margins.  If you are trying to do it with an single image, then this approach may work for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Center Horizontally and Vertically with CSS</title>
<style type="text/css">
#center_both_ways {
width:600px;
height:160px;
background-color:yellow;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-80px;
text-align:center;
}
</style>
</head>
 
<body>
 
<div id="center_both_ways"></div>
 
</body>
</html>

Open in new window

0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
janzalonAuthor Commented:
Thanks!  Your first post works, it centers it all but it keeps everything at the top of the screen... is there a way I can put it in the center of the screen?
0
 
janzalonAuthor Commented:
Is it good practice to design sites at a resolution of 800x600??  If so, do you know of a way to design it to 800x600 when using a screen resolution of 1280x1024?
0
 
janzalonAuthor Commented:
yessirnosir:
Im going to try your suggestion with CSS.
Thanks!
0
 
janzalonAuthor Commented:
the CSS format pushes it to the bottom of the screen now.  I just wanted to have the image automatically centered on any type of screen resolution.
0
 
yessirnosirCommented:
re:  "the CSS format pushes it to the bottom of the screen now"
maybe you could post the rest of your code so we could figure out what is different; am posting screenshots below of what I see in both FF and IE6; do you see something different?

ceter-everything-ff.jpg
ceter-everything-ie.jpg
0
 
janzalonAuthor Commented:
OK, I didnt think text would matter below the image but it may be causing the problem for me.
0
 
janzalonAuthor Commented:
Here is the code with your CSS info in it.

Thanks for the help, much appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
 
#center_both_ways {
				width:600px;
				height:450px;
				position:absolute;
				left:50%;
				top:50%;
				margin-left:-300px;
				margin-top:-250px;
				text-align:center;
}
 
</style>
 
<style type="text/css">
<!--
body {
	background-image: url(_themes/water/background_water.gif);
}
-->
</style>
 
<link href="css/admin.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style49 {color: #B6F1BC}
.style50 {font-size: 11px}
-->
</style>
</head>
 
 
<body>
 
<div id="center_both_ways">
 
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0"></a></div>
    </td>
  </tr>
</table>
 
<!----------------------------------------------------------------- DONT DELETE ANYTHING ABOVE THIS LINE ------------------------------------------------------------>
 
<BR />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
 
</div>
 
</body>
 
</html>>>>>

Open in new window

0
 
yessirnosirCommented:
could you post a screenshot of what you are seeing?  On my machine, everything looks centered, but maybe I'm not understanding what you are trying to do.  Have attached screenshot (I dummied up a graphic to match your 330 x 88 "LaBella_Intranet" graphic.)

The issue may be related to your attached CSS file, admin.css, so you may want to post that too.
labella.jpg
0
 
janzalonAuthor Commented:
I forgot to mention that I changed the following lines:

margin-left:-300px;
margin-top:-80px;

to

margin-left:-300px;
margin-top:-250px;

to get what you see now.  My question now is when someone has a resolution of 800x600, will they need to scroll to see everything or will it be centered on their screen??
0
 
janzalonAuthor Commented:
With this code in

margin-left:-300px;
margin-top:-80px;

I get the following look...

I also dont know why I always get the extra  >>>>>   everytime I save this file.
LaBella.JPG
0
 
janzalonAuthor Commented:
before I used your CSS suggestion I used a bunch of <br> to make it centered on my screen. However when I went to someone elses computer with a smaller screen, they needed to scroll to see everything. This is why Im here now!

Thanks!
0
 
yessirnosirCommented:
the >>>>> are extra characters after your closing </html> tag... that's actually the first thing I fixed with your file but forgot to mention it.

there clearly is still something wrong with the code; the space above "LaBella" should be the same as the space below the last line of text.   If you nuke the link to your CSS file, does the layout suddenly work?  If so, post your CSS and we'll find out what's broken...

I'm tied up the rest of this afternoon, but will check back this evening.
0
 
janzalonAuthor Commented:
I always get rid of the >>>>>> too, I just forgot to do it last time... Why do I keep on getting those?

I took all references to styles out of the HTML file along with the reference to my CSS file. I then put the code that you put up here for the CSS and this is what I get now.

Attached is an image of what I see now.

Below is all the code from the HTML file for your reference.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
#center_both_ways {
width:600px;
height:160px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-80px;
text-align:center;
}
</style>
 
 
</head>
<body>
 
<div id="center_both_ways">
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0" /></a></div>
    </td>
  </tr>
</table>
 
<!----------------------------------------------------------------- DONT DELETE ANYTHING ABOVE THIS LINE ------------------------------------------------------------>
 
<br />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
</div>
 
 
</body>
 
</html>

Open in new window

LaBella.JPG
0
 
janzalonAuthor Commented:
This is totally off topic of my current issue BUT I noticed that when I comment things out with the following code:

See code snippet.

It displays totally different in IE than it does in FireFox.  What I have commented out doesnt show in IE but does in FireFox.  
<body>
 
<!-------------------------------------------------------------------------------->
 
<!---
 
<br><br>
<br><br>
<br><br>
<table width="761" border="0" align="center">
  <tr>
    <td colspan="4"><div align="center" class="style45">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome Wes Pettee To LaBella Associates!</div></td>
  </tr>
  <tr>
    <td width="147" rowspan="2"><img src="Employees By Division/Photos/Pettee.jpg" alt="Wes Pettee" width="147" height="220"></td>
    <td colspan="2"><div align="center" class="style41">Here are some interesting facts:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
  </tr>
  <tr>
    <td width="263" valign="top"><div align="right" class="style46">Music he is listening to in his car:&nbsp;&nbsp;<br>
    	Favorite Food:&nbsp;&nbsp;<br>
		First Job:&nbsp;&nbsp;<br>
        Hobbies:&nbsp;&nbsp;<br>
    Favorite Sports Team:&nbsp;&nbsp;</div></td>
    <td width="337" valign="top"><div align="left" class="style46">U2 <br>
    	Vegetable Stew, Baby Arugula Salad <br>
		Bus Boy at Sherwood Manor in Honeoye Falls <br>
        Bike Riding, Music, Guitar, Hiking, Ice Skating <br>
        Buffalo Sabres
    </div></td>
  </tr>
</table>
 
<!-------------------------------------------------------------------------------->
 
</body>

Open in new window

0
 
yessirnosirCommented:
the height of the #center_both_ways style needs to include the height of the image and all the text in the table below it; I calculate roughly 480 px.  So try height 480px and margin-top:-240px and see what that looks like.  Have pasted my mod to your latest code below:

re: the strange behavior of the comments, apparently you need to have a space somewhere in the middle between the opening and closing comment markers.  i.e. doesn't like the solid line you used in lines 3 and 33.   I usually use Dreamweaver to apply comments markup; just select the text in code view that you want to comment, then right-click, choose Selection, and choose Apply HTML Comment.  Later you can reverse the comment in the same manner, but choosing "Remove Comment"

One of the downsides of the negative margin approach is that if someone makes their screen really short, part of your page will disappear above their viewing window, where it can't even be reached with scrolling.  (try it by squeezing your window vertically).

Also, if you change your styles or add/remove lines of text, the overall text block will change height, so you'll have to fine tune the center_both_ways style to compensate.

Some people use a Javascript approach to check the user's screen dimensions, and adjust the layout accordingly.  If you're interested I can post an example of how that works, but personally I prefer to stick to CSS for layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LaBella Associates, P.C. Intranet</title>
 
<style type="text/css">
#center_both_ways {
width:600px;
height:480px;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-240px;
text-align:center;
}
</style>
 
 
</head>
<body>
 
<div id="center_both_ways">
<table border="0" align="center">
  <tr> 
    <td height="116">
   	  <div align="center"><a href="http://dragon2:82"><img src="LaBella_Intranet21%20blue.JPG" alt="LaBella Intranet" width="330" height="88" border="0" /></a>
      </div>
    </td>
  </tr>
</table>
 
 
 
<br />
 
<table border="0" align="center">
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Current Events.htm" class="style1">Current Events for Employees</a></div>
   	  <div align="center" class="style1a">Updated ... 10/15/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Company Info.htm" class="style1">Company Information</a></div>
   	  <div align="center" class="style1a">Updated ... 11/10/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="50">
    	<div align="center"><a href="html/Web Info.htm" class="style1">Web Information</a></div>
   	  <div align="center" class="style1a">Updated ... 10/06/08</div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center"><a href="html/2008 Benefits.htm" class="style1">2008 Benefits Information</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style2"><a href="http://www.labellapc.com" target="_blank">Corporate Website</a> ... <a href="http://www.google.com" target="_blank">Google's Home Page</a></div>
    </td>
  </tr>
  
  <tr>
    <td height="35">
    	<div align="center" class="style1a"><a href="mailto:darnold@labellapc.com?cc=springle@labellapc.com&subject=LaBella%20Intranet%20Comments">Suggestions? Comments?</a></div>
    </td>
  </tr>
</table>
 
<div align="center" class="style1a">This INTRANET is constantly being updated ... Please visit often!</div>
<br />
<div align="center" class="style1a style49 style50">LaBella Helpful Tips Section Has Been Updated!</div>
 
</div>
 
 
</body>
 
</html>

Open in new window

0
 
yessirnosirCommented:
on a bit of a tangent:  a really great tool for working on these kind of issues is the "Web Developer Toolbar" available as a plugin for Firefox.  It has all sorts of tools to help analyze exactly how a page is being rendered.  But the specific reason I thought about it in your case is it includes a button "Resize" that lets you instantly resize your window to exactly 800x600 (or any other resolution to want to test).  It only runs in Firefox, but, um..., that's the best browser anyway!

https://addons.mozilla.org/en-US/firefox/addon/60 
0
 
janzalonAuthor Commented:
I think I understand what you are doing here now!  Thanks.  

However I do have some more questions. if you dont mind.
1. What does the following lines of code do, what do they mean?

position:absolute;
left:50%;
top:50%;

2. What is the point of left and right if you have margin-left and margin-top?

3. I assume that the width and height is the actual box that all the information that Im trying to center fits into.

4. If I put the following code in my CSS, text-align:center;, then I dont need to <div align="center" all my text and images correct?

---------------------------------------------------------------------------------------------------------------------------

I see what you mean about the vertical issue. I guess I will have to deal with that issue if I want it centered on all screen resolutions.

If you can paste the Javascript code that would be cool to look at too!  Thanks!

--------------------------------------------------------------------------------------------------------------------------
re: the strange behavior of the comments. I will have to try out the comment thing in Dreamweaver. Thanks for letting me know that.

re: Is it good practice to design sites at a resolution of 800x600??  If so, do you know of a way to design it to 800x600 when using a screen resolution of 1280x1024?

re: I always get rid of the >>>>>>... Would you know why I keep on getting those back?

Thanks for all your help!

0
 
yessirnosirCommented:
1.  this says the top left corner of the DIV is 50% of the way down from the top and 50% of the way over from the left of the containing element, which is the <body>.  So said another way, it says to put the top left corner of the DIV exactly in the middle of the browser window.
I have a printout of this in a reference binder I keep handy to remind me of exactly what those position options mean:  www.quirksmode.org/css/position.html

2.  the margin-left and margin-top are negative.  This is is a strange concept!  But it allows you to move the effective top-left corner of the box further to the left and further up the page.  So the DIV position is still considered to be exactly in the middle of the window, but the negative margins allow you to make it appear to be centered.  

3. yes.

4.  in general yes, text-align:center will do what div align="center" does.

5.  I don't think I have any particular wisdom to contribute to your design resolution question.  In some cases, a fixed layout serves the purpose, and in that case designing wider than 800 (779 really) can cause some users to need horizontal scrolling, so many websites use a 779px width for a container div or table.  In some cases, a liquid layout that fills the screen is better for a particular site.  Or if you are designing for a controlled group, you can take more liberties, like my family photo album is designed for 1280x1024.  I've worked with lots of different setups and the only layout I absolutely won't use is anything to do with frames!
 
I have no idea why the >>>>> are coming back.  

below is a page that sets the height of a "spacer" div based on a javascript function that checks the user's browser height.   I don't really like it because it doesn't respond as smoothly as CSS, especially when you resize your browser, and the spacer doesn't recalculate unless you reload the page.   But it avoids ever having anything become hidden. (although I'll bet there is a CSS solution for that too, I just haven't given it much thought)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
*{margin:0px;padding:0px;}
 
#container {
	margin:0 auto;
	height:600px;
	width:800px;
	text-align: center;
	background-color:green;
}
</style>
 
<script type="text/javascript">
// this code adapted from here:  http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/  //
function setHeight() {
 var viewportwidth;
 var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
// older versions of IE
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
var spacer = (viewportheight - 600)/2;
document.getElementById("spacer").style.height = spacer + "px";
}
</script>
 
</head>
 
<body onload="setHeight()">
 
<div id="spacer"></div>
 
<div id="container">
        Center This
</div>
 
</body>
</html>

Open in new window

0
 
yessirnosirCommented:
Hey janzalon, your post got me googling around and I stumbled across another solution to this problem; I tested it in FF and IE6 and it seems to be pretty robust.  Got it from here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

have pasted a modified version of his code below.  the actual CSS is pretty complicated, can't say I totally understand it myself since it relies on differences standards-compliance between browsers.  but you may want to have a look...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 
<html>
<head>
<title>Centered Both Ways</title>
<!--adapted from 	http://www.jakpsatweb.cz/css/css-vertical-center-solution.html-->
<style type="text/css">
* {margin:0;padding:0;}
body, html {height: 100%;}
#outer {height: 100%; width:100%;overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
#inner {width: 300px; margin-left: auto; margin-right: auto;} /* for all browsers*/
		/* optional: #inner[id] {position: static;} */
		/* just format */
div.greenBorder {border: 1px solid green; background-color: ivory;}
</style>
</head>
<body>
<div id="outer" >
	<div id="middle">
		<div id="inner" class="greenBorder">
			any text<br>
			<b>any height</b><br>
			any content, for example generated from DB<br>
			everything is vertically centered<br>
		</div>
	</div>
</div>
</body>
</html>

Open in new window

0
 
janzalonAuthor Commented:
hello:

thanks for looking into it further.   I never get sick of people posting things that may help the situation. I appreciate all feedback.

I will look over what you posted and get back to you!

Thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.