Center an image at the top of the page.

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

Subscribe Post Reply

2844

AricC

1,892

Expert 1GB

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

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>

        <head>

            <title>Center An Image</title>

                <style type="text/css">

                #clsBanner

                {

        display: block;

        margin-left: auto;

        margin-right: auto;

                } 

                </style>

        </head>

            <body>

                    <img src="images/testimage.jpg" style="" id="clsBanner" alt="Test" />

            </body>

</html>

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

hyphenpipe

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

AricC

1,892

Expert 1GB

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

by: Tony Vasquez | last post by:

Can somoene give me an example of how to center a div, according to it's image size... I am using different images, and so I have to resize it in a functino according to the image's size. So I use...

Javascript

Center an image on a tab page

by: Sean | last post by:

Hi, I have a tab control containing few tab pages. On each tab pages, I put an image on the tab page's title bar (the area on top of a tab page, ie where tooltip will appear). If i put both...

C# / C Sharp

How do i center align divs

by: roula | last post by:

I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them...

HTML / CSS

Blog's 2 divs won't center side-by-side.

by: judacris | last post by:

I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing. my blogger blog is functioning well on my site for now, but the blog feed (left) and...

HTML / CSS

<center> and Style Position:Absolute with changing window Size?

by: jobs | last post by:

I have a simple login page with roughly a 300px x 300px image behind the asp.net login control. I need the login control to land in the middle of the image. I want both the image and the login...

ASP.NET

to center using CSS... a bit weird?

by: Summercool | last post by:

in http://www.0011.com/test_size3.html to center the logo "HTML 4.01 check" button at the bottom of the page, I used <div style="width: 10px; margin: 0px auto"> </div>

HTML / CSS

Flash movie(banner) center problem between browsers [Video Proof]

by: GloStix | last post by:

I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to...

HTML / CSS

Center Image Vertically

by: jerrygadd | last post by:

Can some body help me vertically center an image using CSS? The customer only uses IE, and so the code is not debugged for other browsers! The image in question is found on line 1075 :...

HTML / CSS

Center-Aligning elements

by: gaijinco | last post by:

I was a hobbist web coder for years but I had to sidestep for a while. Now I'm trying to return to it and I'm trying to clarify how am I supposed to do somethings with CSS v.s. HTML and I'm...

HTML / CSS

Which elements should be affected by text-align:center

by: Stevo | last post by:

I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. ...

HTML / CSS

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Center an image at the top of the page.

Similar topics