#### Archived

This topic is now archived and is closed to further replies.

# Center image in HTML

This topic is 5469 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

How do I center the image to browser window using style attributes in followin?

<a href="link.html"><img src="image.png" style="position: absolute; top: 400px; left: 200px"/></a>


##### Share on other sites
<center> </center>

##### Share on other sites
The CSS method of centering is to set margin-left and margin-right to auto.

##### Share on other sites
Bah! <center> is a deprecated tag! <div align="center"> is better.

Qui fut tout, et qui ne fut rien

##### Share on other sites
quote:
Bah! <center> is a deprecated tag! <div align="center"> is better.

Align is deprecated too . Edit: fixed tags.

[edited by - Null and Void on March 4, 2003 2:54:40 AM]

##### Share on other sites
Sorry, I should have said that vertically to center, that''s the problem.

##### Share on other sites
Maybe I could use php to calculate write absolute coordinates, if I get to know window size and image size somehow? :\

##### Share on other sites
This is harder than I thought
How can it be so difficult to put one image to center horizontally and vertically?

##### Share on other sites
There is 2 types of align "align" normal horizontal align, and "valign" vertical align the syntax for the normal align is left, center, right. The syntax for valign is top, middel, bottom, the problem is that they cant get used i the same "term" valign is for <tr> tablerowaligment, and align is for text aligment, i use www.devguru.com if i have forgotten the syntax.

img tag align syntax

align deprecated 4.0
The align attribute is used to control the position of the image with respect to the text and other elements. The permitted values are absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, and top. This attribute is deprecated effective with version 4.0. However, most browsers continue to recognize this attribute.

Table <tr> tag valign syntax

valign
The valign attribute is used to set the vertical alignment of the cell contents for all of the cells in a single row. The possible values are baseline, bottom, middle, and top.

So if you are planing not to use tables you can use % values in your style sheet and by asigning id style tag you can specifik asign values for your tags, but check out devguru's css pages you can find the css id tag syntax there

[edited by - Kasper S on March 4, 2003 4:24:54 AM]

##### Share on other sites
I take it you're only displaying the image ? using CSS you could do something like:
<img id="mypic" src="myimage.png" style = "position: relative; left: 200px; top: 200px" / >

This would basically float the image in a seperate layer. To actually center the image you'd need to use some javascript (getElementById("mypic").syle.top = y; ). Or you could try to find some %ages that worked okay.

To be honest though, I'd suggest that your best bet would to be to use tables: for example you could have a 1 cell table with it's halign & valign set to "center" or "middle", set the width & height of the table to be 100% obviously, then this will result in the image being automatically centered, even as the page resizes.

[EDIT] forgot the forum does silly things when you put a semicolon next to a bracket & it's trying to wind me up by sticking 'no' infront of where I'd written style

[edited by - NickB on March 4, 2003 7:15:05 AM]