How do you center an image vertically and horizontally...

[TheDoctor]

How do you center and image vertically and horizontally so that from any size screen it will be prefectly centered?

Thanks

[TheDoctor]

OK, I figured out how to do it horizontally but how do you do it vertically?

Thanks

[mikmik]

My first thought, would be to have a good look at what the rest of your pqge contains, block wise.

So, I would put it in an 'absolutely' positiond div with a height of 100%, and put the image in another div with position: relative.

Make good and sure you do not change any 'Z-ndexes', because luckily, when a relatively positioned box is in an 'absolute' container, all inline elements will will flow around the picture , and not ignore it and go over or under it like is usually the case .

I will get back to you, so if it is not working out, would you show us the page?

Many happy returns, ..

Hey, we are going to be going through dealing with all these types of issues in a week or two.
Make sure you check out the thing we have going on in web programming, I hope it hasn't been messed up to badly with all the sudden activity and shuffling, but it will be great and things will become familiar to us again very quickly.

There are some finer details, like the order they are coded in, that we can watch out for if you can give us a look :o)

[DigitalDragon]

There are a couple of ways (depending upon the effect you want to achieve and how many other elements you have on the page). Off the top of my head:

1.Use CSS.

for example:

<style type="text/css">
<!--
.unnamed1 {
left: 40%;
top: 40%;
position: relative;
}
-->
</style>
[img]blahblah.png[/img]

I recommend you search for more information about CSS and positioning, before going ahead and using it.

2. Stick it in a table.

for example:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">[img]blahblah.png[/img]</td>
</tr>
</table>

The old fashioned lazy way. Pretty straightforward if it's the only image on a page, or the only image object contained within a table cell element.

3. Use DIV's, as already mentioned. Beware though; research carefully. Both CSS and layers (DIV, etc) have compatibility issues. Only sticking it in a table cell will pretty much stay consistent throughout platform and browser version.

I'm sure there are more. If you give me a more specific example of what you are doing, maybe I can help you further?

[TheDoctor]

There is only the image on the page. What is the easiest way to do it? I know there is a html or java script that should center it vertically. Does anybody know whatit is?

Thanks

[DigitalDragon]

If it's just the image, use the table cell example I mentioned.
It'll work just fine.

BTW: I just had a flick through of all your posts. If you need a lot of help, one of the best ways to really learn something is to research it yourself first. Not that anyone here minds helping, but, when someone doesn't look like they've even tried to solve a problem themselves, and continues to ask for more help, it can eventually get frustrating. Please don't think I'm having a go at you or anything, it's just that, in my personal experience, the only way I learned something and made it stick was by doing it myself. If I still really couldn't figure it out, then I'd ask for help, citing examples of what I had tried.

Google is NOT your friend, but feel free to use AltaVista or Yahoo.

Take care and happy searching!

[TheDoctor]

I know there is a better way to do it than that?

There is a script it's align somethign etc.

Anydboy know it?

Thanks

[matauri]

What format are you using? HTML / XHTML / PHP, etc... with or without CSS?

It's always a good idea to include this so we know what kind of coding & standards we are looking at.



Cindy

[paulhiles]

This may be on the lines of what you're after... I'm not sure whether it's a 100% cross-browser friendly, but take a look anyway. You would just substitute the text with your image.
http://www.wpdfd.com/editorial/thebox/deadcentre1.html

Paul

[TheDoctor]

HTML would work.

Thanks

[DigitalDragon]

Well, I had already brought up CSS.

If you know there's a better way to do it than the most basic method (i.e. the table cell method) why are you here asking us for help?

The very good example paulhiles mentioned is exactly what I said in my first example - use CSS. Maybe you didn't see the bit about me encouraging you to find out a wee bit more on your own.

I'm sorry if what you're looking for is the EXACT solution to you problem, explicitly laid out for you, so you don't have to do ANYTHING except cut and paste. Any news group treated the way you have treated us here would tell you, politely, to leave. I've seen it many times.

Also, everyone here has asked you for more information, in order to help you further, but you failed to give it.

I'm sorry, but you seem a little too demanding and ungrateful to me. Maybe I don't know you well enough, but as I said, I did go through and read all your posts here.