Archived

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

Center image in HTML

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

If you intended to correct an error in the post then please contact us.

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 this post


Link to post
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 this post


Link to post
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]

Share this post


Link to post
Share on other sites