Keeping absolutely positioned images centered

[locus123]

Hi All,

I am fairly new to web designing and i am trying to figure out how i can keep my absolutely position images centered as the browser window is resized.

The images are positioned relative to my container div which houses the entire page.

thanks in advance for your response.

All sugestions welcomed.

[Marshall]

If you are using CSS and the image IS NOT in a <div>, then

CSS
img.center {/* assuming multiple images, a class is assigned */
margin: 0 auto;
width: WHATEVERpx; /* should be width of image */
text-align: left; /* IE Hack, may or may not be needed */
}

HTML
<img src="whatever.jpg" class="center" />

If you are placing the image in a <div> change to this:

CSS
#img_center {
margin: 0 auto;
width: WHATEVERpx; /* minimum width should be width of image */
text-align: left; /* IE Hack, may or may not be needed */
}

HTML
<div id="img_center">
<img src="whatever.jpg" width="?px" height="?px" />
</div>

If you need to do this multiple time, use the class, whether assigned to the img or <div> as id's can only be used once per page. Regardless, the width of the element must be designated.

Marshall

[kamran]

hi locus,

its a bit confusing in the first place, you say that the images are absolutely positioned in the first line and then you say they are relatively positioned in a div in the 2nd line.

Anyways, i'd assume you have an image relatively positioned in a div (2nd statement overwrites the first one hehe).

So here goes the solution:

The following is the CSS class for the image:

<style type="text/css">

.centeredImage {

width: 100px;

height: 100px;

position: relative;

left: 45%;

}

</style>

And this is the DIV code with that image:

<div style="background-color: red; width: 100%;">

<img class="centeredImage" src="foo.jpg" alt="some image" />

</div>

IMPORTANT:

You must change the left position in the .centeredImage class above with respect to your image width. For example, if you need to centerize an image with a width of 500 pixels, you would do something like this:

<style type="text/css">

.centeredImage {

 width: 500px;

 height: 100px;

 position: relative;

 left: 30%;

}

</style>

Having said all this, there might be a better/alternative solutio. This was one way that came to ma mind! :) Cheers!

Kamran

[burro]

Would it work for you to have the containing div be of fixed width, and itself centered on the page?

In that case, I would think that a CSS element positioned relative to the containing div, such that it is centered within that div, would always remain centered on the page.

?

[sifredi]

The img element is displayed inline by default, so applying a

text-align: center;

to it's parent container should be enough. If your image is displayed as a block-level element, you can use

margin: 0 auto;

as described above, or a negative positioning as so:

width: 200px; left: -100px; margin-left: 50%; position: relative;

.

I hope that helps.

[burro]

Here's an example of what I mean:

Create a one-cell table that encapsulates all other visible page elements. Center that table on the page. Then put a fixed-size "wrapper" div inside that table, but also encapsulating everything else on the page. If the other div position is centered relative to that "wrapper" div, then the table will keep the wrapper div, and therefore the centered image, centered on the page.

So "absolute" positioning might not do it.

Sadly, there seem to be many things that do not work as advertised about CSS, such as vertical relative positioning of text, etc., and horizontal relative positioning. As a newbie to CSS, myself, I am discovering that it seems I have to use tables quite often for vertical and horizontal relative positioning.

CSS seems like a great idea, if only it worked right, and if only it gave a few more basic tools, eh?

[locus123]

thanks a million for your responses guys, i have learned a lot from what you guys have said and now i have the thing working in a manner that is acceptable.

Burro i am starting to feel the same way you do about this css thing, it is a great idea, but it needs a little more work, and so tables live on.

Thanks again for your time guys.

[rocknbil]

Thank you SuzyUK for pointing us to dead center [wpdfd.com] (or dead centre, depending on which side of the pond you're on.) :-)

[locus123]

rocknbill,

You have just opened the door to many new possibilities for me with that post, i used it in my code and the results are marvelous.

I wont stop until i completely understand every letter of the horizon class.

thanks man, that is cool. And thanks to suzyuk for making everyone aware of it

[locus123]

ok,

i see that i can use the positioning as outlined by the horizon id to position say an image, and it will stay in the center of the page, even when the browser is resized.

I am trying to apply this to a form i created, but the form does not move when the browser is being resized, it just stands exactly where i positioned it untill it is ran over by the browser.

How can i position the form absolutely and get it to move automatically as the browser is resized, trying to maitane visibility and its position within the browser, just the way the that red box in "dead center does"

all suggestions welcomed.

oh i should mention that i have elements in my form that are positioned relatively

[sifredi]

"How can i position the form absolutely and get it to move automatically as the browser is resized"

you'll have to be more specific here. "absolute" positioning means that the element is absolutely positioned inside it's first positioned parent. If an element is positioned or "moving" automatically as the browser window is resized (like the dead center example), it needs to be positioned relative to that parent.

That said, there are always ways to combine them or simply alter your code a bit to make the whole thing work as you intended. Maybe some outlined source code would help?

[locus123]

Thanks for your response,

ok this is what i am working with

<div Container> 
<div>image</div> (times three)
<div id="horizon">
 <form action="" method="get" id="theform" >
 <fieldset>
  <legend>
  Login</legend>
 <label for="username">
 User Nmae:
 <input id="username" name="username" type="text" value="name" />
 </label>
  
  <label for="password">
  Password:
  <input id="password" name="password" type="text" value="check" />
  </label>
 </fieldset>
 </form>
 </div>
</div> <!-- container div ends here-->

there are three images above the form and my container div has the text align property set to center.

i basically just slapped the horizon div over my form to see if it would work just like the dead center example. the relevant styles
are as follows:

#horizon fieldset {
display: block;
border: 1px solid #000000;
margin-top: 0;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;
padding: 1em;
width: 400px;
}
#horizon input{
position: relative;
top: -1.4em;
left: 8.5em;
display: block;
}
#horizon label {
clear: both;
float: left;
display: block;
width: 6em;
margin-top: -.5em;
font-weight: bold;
text-align: right;
}
#horizon 
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 456px;
left: 4px;
width: 100%;
height: 25px;
overflow: visible;
visibility: visible;
display: block
}

I just want to position the form on the page and have it maintane its position when the browser is resised, just like the dead center example.

Before i tried the horizon div that you see in the code, i had used:

#Container #theform {
position: relative;
right: -375px;
bottom: 330px;
width: 800px;
}

to try and position the form, the horizontal position of the form was different across firefox 2 and IE 7. this is why i thought that the absolute positioning as shown in the dead center example would help.

The container div is not positioned.

If anymore clarification is needed i would be happy to give it.
thanks again