[HTML] How To Align Any Image Center !

[Rapid S]

You dont know how to align images @ center ?
today i will teach you



A Simple Img Code to align it to left

<img src="http://www.besthostingforums.com/images/logo.png"> 

To Align The Image to Center use this code

<center><img src="http://www.besthostingforums.com/images/logo.png"></center> 

hope i have explained well (although this was my first tutorials)


=========================

A better way is to use DIVs and CSS and auto the margin:

margin: auto; 

Above Code Is Suggested By jayfella

Rapid S Reviewed by Rapid S on 15th Jun 2010. [HTML] How To Align Any Image Center ! You dont know how to align images @ center ? today i will teach you :) :) A Simple Img Code to align it to left <img src="http://www.besthostingforums.com/images/logo.png"> To Align The Image to Center use this code Rating: 5

[CM]

Kinda too basic but still. Cool.

[jayfella]

A better way is to use DIVs and CSS and auto the margin:

margin: auto;

[Rapid S]

THanks Jay nice info

[ImMoRtAl-]

would it me better to use
<div align="center">
your image here
</div>

[jayfella]

well using align=center doesnt always work in all browers. Its really picky - it will work sometimes, and not at other points in the page. Using auto margins is completely cross-browser compatible.

Using <center> is fine, but you should really put as many variables in the CSS as possible, so you dont have to edit any html/php files and easily make any necessary changes via CSS.

[Mr Happy]

<center> isn't advised. It's not html 5 compliant either any more if I remember correctly. I believe it's being dropped in favor of css as show by jayfella. I know your probably not using html 5 now but you may as well learn for the future.

EDIT: lol hot topic for a <center> topic

[litewarez]

to be honest i ahve never used the <centre> in my codings i would prefer to do in CSS

.left{
    float:left;
}
.right{
    float:right;
}
.acentre{
    text-align:centre;
}

Then in my html use like

<div class="left">
   <img class="acentre" src=",..."/>
</div>

You save so much time if you use classes t o store your design parameters

[el_jentel1]

You need a width value for margin: auto; to work properly.

Example:

<div style="width: 400px; margin: 0 auto;"></div>

[Skords]

u can use tables if u want
<table width=100%><tr><td><img src="blahblah.jpg"></img></td><tr></table>
you can use height=100% too if u want it to be in the center of the page..! however it is not compatible with some versions of IE