PDA

View Full Version : How to center pictures on page?

Daniel
03-23-2005, 07:29 PM
Hi, all

I *love* Pixelpost. It's been one of the easiest, most intuitive blogging tools I've ever used.

Yet I can't figure out how to center a picture in my template. I'm using a slightly modified version of the Greycard template, and images are centered as long as they're around 750 pixels wide.

If they're smaller, however, they left-align, as in this post:

http://www.eastcolfax.com/blog/index.php?showimage=20

Any ideas on where to start looking and/or what to change? Thanks!

Daniel
Rob
03-23-2005, 07:34 PM
You could just put a <div align="center"></div> tag around your image/a href in your template. That would probably be a quick and dirty solution ;)
Anonymous
03-23-2005, 08:08 PM
You could just put a <div align="center"></div> tag around your image/a href in your template. That would probably be a quick and dirty solution ;)

Thanks, Commando. I've poked around my styles.css and image_template.html, but I don't see anything that stands out as the actual image itself.

There's a "src="images/<IMAGE_NAME>" bit in the image_template, and an interesting "#image_info" section in the styles.css, but I don't see a basic HREF anywhere for the image.

Any ideas?

Thanks!

Daniel
Rob
03-23-2005, 09:23 PM
The HTML for your image is;

<!-- image -->
&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img id="image" src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" title="Click for &lt;IMAGE_PREVIOUS_TITLE>" /></a>
&lt;!-- image info -->

So, you could add image in your CSS since the img tag has that id.

You add something like this;

#image {
text-align:center;
}

I am not a CSS guru though, but it might work. Don't forget to reload to refresh your css.

you could also try wrapping the image in a center tag like this;


&lt;!-- image -->
&lt;div align="center">&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img id="image" src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" title="Click for &lt;IMAGE_PREVIOUS_TITLE>" /></a>&lt;/div>
&lt;!-- image info -->
Anonymous
03-25-2005, 02:50 PM
Thanks, Commando. You've given me places to look, and that's exactly what I needed!

Daniel

The HTML for your image is;

&lt;!-- image -->
&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img id="image" src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" title="Click for &lt;IMAGE_PREVIOUS_TITLE>" /></a>
&lt;!-- image info -->

So, you could add image in your CSS since the img tag has that id.

You add something like this;

#image {
text-align:center;
}

I am not a CSS guru though, but it might work. Don't forget to reload to refresh your css.

you could also try wrapping the image in a center tag like this;


&lt;!-- image -->
&lt;div align="center">&lt;a href="index.php?showimage=&lt;IMAGE_PREVIOUS_ID>">&lt;img id="image" src="images/&lt;IMAGE_NAME>" alt="&lt;IMAGE_TITLE>" title="Click for &lt;IMAGE_PREVIOUS_TITLE>" /></a>&lt;/div>
&lt;!-- image info -->