I'm re-writing some early stuff! It's seems to be problem after problem today!! Anyway, I'm trying to centre an image - I know this will be a really easy thing to do for someone, but this just isn't my day!<br />
<br />
I did have <center><img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg"></center>, however since <center> is out the window now, how is it done?<br />
<br />
I've tried starting the line with <p style="align: center;">, to no avail....presumably I'm way off.<br />
<br />
The images are links if this makes any difference at all.<br />
<br />
Thanks in advance!<!--content-->Since <img> elements are inline-level elements, you can use text-align to position them. For example:<div style="text-align: center;"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="" /><br />
</div><!--content-->Thank you, that's one I'll remember forever now! I've so many to change!<!--content-->Originally posted by screaming_banjo <br />
Thank youNo problem.
Originally posted by screaming_banjo <br />
I've so many to change! In that case, I wouldn't recommend doing it the way I did! I used inline styles (using the style attribute) merely for the simplicity of the example. If you have to make this change in multiple places, I'd recommend creating a CSS class to do this. For example:<style type="text/css"><br />
/*<![CDATA[*/<br />
.center { text-align: center; }<br />
/*]]>*/<br />
</style>Then, on every element you that you want all inline-level elements to be centered, you can do this:<div class="center"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="" /><br />
</div><!--content-->It's okay, that's the way I've done it anyway, it was just the syntax for getting it in the centre that I was stuck with!!<br />
<br />
Actually, I'm quite impressed that I thought to do that all on my own - must be learning something!!!<!--content-->any idea why this image isn't centering then?<br />
<br />
<div id="button"> <br />
<h1><img src=http://www.webdeveloper.com/forum/archive/index.php/"bedgebury.gif" width="47" height="62" alt="Bedgebury Logo" />Bedgebury School</h1><br />
</div><br />
<br />
and the css:<br />
<br />
#button { <br />
border: 1px solid #2586d7;<br />
width: 12em; <br />
border-right: 1px solid #000; <br />
padding: 0px;<br />
margin-top: 3em;<br />
background-color: #90bade; <br />
color: #333; <br />
float: left;<br />
} <br />
<br />
#button h1{<br />
background-color: #FFF;<br />
display: block;<br />
text-align: center;<br />
font-size: small;<br />
margin: 0px;<br />
padding: 5px;<br />
border-left: 10px solid #1958b7; <br />
}<br />
<br />
#button img{<br />
background-color: #FFF;<br />
text-align: center;<br />
display: block;<br />
}<br />
<br />
it centers in IE but not FF or NN<!--content-->so use<br />
margin:0px auto;<br />
inside of the image class.<!--content-->
<br />
I did have <center><img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg"></center>, however since <center> is out the window now, how is it done?<br />
<br />
I've tried starting the line with <p style="align: center;">, to no avail....presumably I'm way off.<br />
<br />
The images are links if this makes any difference at all.<br />
<br />
Thanks in advance!<!--content-->Since <img> elements are inline-level elements, you can use text-align to position them. For example:<div style="text-align: center;"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="" /><br />
</div><!--content-->Thank you, that's one I'll remember forever now! I've so many to change!<!--content-->Originally posted by screaming_banjo <br />
Thank youNo problem.
Originally posted by screaming_banjo <br />I've so many to change! In that case, I wouldn't recommend doing it the way I did! I used inline styles (using the style attribute) merely for the simplicity of the example. If you have to make this change in multiple places, I'd recommend creating a CSS class to do this. For example:<style type="text/css"><br />
/*<![CDATA[*/<br />
.center { text-align: center; }<br />
/*]]>*/<br />
</style>Then, on every element you that you want all inline-level elements to be centered, you can do this:<div class="center"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"foo.png" alt="" /><br />
</div><!--content-->It's okay, that's the way I've done it anyway, it was just the syntax for getting it in the centre that I was stuck with!!<br />
<br />
Actually, I'm quite impressed that I thought to do that all on my own - must be learning something!!!<!--content-->any idea why this image isn't centering then?<br />
<br />
<div id="button"> <br />
<h1><img src=http://www.webdeveloper.com/forum/archive/index.php/"bedgebury.gif" width="47" height="62" alt="Bedgebury Logo" />Bedgebury School</h1><br />
</div><br />
<br />
and the css:<br />
<br />
#button { <br />
border: 1px solid #2586d7;<br />
width: 12em; <br />
border-right: 1px solid #000; <br />
padding: 0px;<br />
margin-top: 3em;<br />
background-color: #90bade; <br />
color: #333; <br />
float: left;<br />
} <br />
<br />
#button h1{<br />
background-color: #FFF;<br />
display: block;<br />
text-align: center;<br />
font-size: small;<br />
margin: 0px;<br />
padding: 5px;<br />
border-left: 10px solid #1958b7; <br />
}<br />
<br />
#button img{<br />
background-color: #FFF;<br />
text-align: center;<br />
display: block;<br />
}<br />
<br />
it centers in IE but not FF or NN<!--content-->so use<br />
margin:0px auto;<br />
inside of the image class.<!--content-->