Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1558
  • Last Modified:

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
0
brendanwov
Asked:
brendanwov
  • 2
  • 2
1 Solution
 
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now