By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Center an image at the top of the page.

P: 2
I am going completely nutso here and I am sure someone will point me in the right direction.

I am trying to center and image that is 780 pixels wide at the very top of my page, and for some reason it keeps pushing it over to the side. I have tried many different things to get this centered and I am pulling my hair out.

Have a look at the code:

Site Link

..and I am sure the solution is easy.

I want the image to be centered regardless of screen resolution or browser.

Thanks people!
Mar 27 '07 #1
Share this Question
Share on Google+
3 Replies


Expert 100+
P: 1,892
I am going completely nutso here and I am sure someone will point me in the right direction.

I am trying to center and image that is 780 pixels wide at the very top of my page, and for some reason it keeps pushing it over to the side. I have tried many different things to get this centered and I am pulling my hair out.

Have a look at the code:

Site Link

..and I am sure the solution is easy.

I want the image to be centered regardless of screen resolution or browser.

Thanks people!
The <center> tag is deprecated, also you need a DOCTYPE (check the thread at the top of the forum) I've provided a sample below that should do what you want:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.     <html>
  3.         <head>
  4.             <title>Center An Image</title>
  5.                 <style type="text/css">
  6.                 #clsBanner
  7.                 {
  8.         display: block;
  9.         margin-left: auto;
  10.         margin-right: auto;
  11.                 } 
  12.                 </style>
  13.         </head>
  14.             <body>
  15.                     <img src="images/testimage.jpg" style="" id="clsBanner" alt="Test" />
  16.             </body>
  17. </html>
  18.  
Also, FYI if you have an element with a specific width (780px) and the browser window is smaller you will get scroll bars. There isn't a whole lot you can do about that. I wouldn't worry most screen resolutions are at least 800x600.
Mar 27 '07 #2

P: 2
The <center> tag is deprecated, also you need a DOCTYPE (check the thread at the top of the forum) I've provided a sample below that should do what you want:
Also, FYI if you have an element with a specific width (780px) and the browser window is smaller you will get scroll bars. There isn't a whole lot you can do about that. I wouldn't worry most screen resolutions are at least 800x600.
Thanks but how would I get it to the very top edge of the page utilizing the css you have created?

Thanks!!!
Mar 27 '07 #3

Expert 100+
P: 1,892
Thanks but how would I get it to the very top edge of the page utilizing the css you have created?

Thanks!!!
In your CSS give the body a 0 margin. If you need help let me know.
Mar 28 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.