Verticle Alignment Botton, Horizontal Alignment Center

Hello Experts!

For those of you who are CSS experts, this is likely a dumb question.  However, I am trying to get an image to align on the bottom of the screen verticly and the center of the screen horizontally.  However, I must be doing something wrong with the code below.  Any help you could lend would be greatly appreciated!

<html>
<head>
<style>
<!--
body {
   padding: 0px;
   margin: 0px;
   background-color: #2E404A;
   text-align: center;
}
#center-bottom {
   position: absolute;
   bottom: 0px;
   text-align: center;
}
//-->
</style>
</head>
<body>
  <div id="center-bottom">
    <img onMouseOver="window.status='- Enter';return true" onMouseOut="window.status='';return true" src="http://www.ironlungstudios.com/pac_hill.gif" width="850" height="680" border="0" />
  </div>
</body>
</html>


Thanks!

Brendan
brendanwovAsked:
Who is Participating?
 
jfredricksonCommented:
What is the problem you are having?

Try using "margin: 0 auto;" to center elements horizontally.
0
 
brendanwovAuthor Commented:
Hey!

Can you insert the code where I will need it?  I tried inserting it in a few places and I didn't get the results I was looking for.

Thanks for your help!

Brendan
0
 
jfredricksonCommented:
Again, what is the problem you are having. You simply say that you think you are doing something wrong, but that doesn't tell us what is going wrong. Without knowing what the problem is, we can only take a stab in the dark.
0
 
kenikiCommented:
<html>
<head>
<style>
<!--
body {
   padding: 0px;
   margin: 0px;
   color:#ffffff;
   background-color: #2E404A;
   text-align: center;
}
#center-bottom {
text-align: center;
}
//-->
</style>
</head>
<body>
<p>Some Example Text</p>
  <div id="center-bottom">
    <img onMouseOver="window.status='- Enter';return true" onMouseOut="window.status='';return true" src="http://www.ironlungstudios.com/pac_hill.gif" width="850" height="680" border="0" />
  </div>
</body>
</html>
0
 
brendanwovAuthor Commented:
Thanks for all your help.  In addition to your comments, I figured out a few things.  This is what I was trying to do...


<!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>
<title>Pacific Hills Church</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
<!--
body {
   padding: 0px;
   margin: 0px;
   color:#ffffff;
   background-color: #2E404A;
   text-align: center;
}
#center-bottom {
   position: absolute;
   width:100%;
   left:0;
   margin: 0 auto;
   text-align: center;
   bottom: 0px;
}
//-->
</style>
</head>

<body>
  <div id="center-bottom">
    <img onMouseOver="window.status='- Enter';return true" onMouseOut="window.status='';return true" src="http://www.ironlungstudios.com/pac_hill.gif" width="850" height="680" border="0" />
  </div>
</body>
</html>
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.