Hi all - this is driving me absolutely nuts. I'm not
the most experienced with CSS, so I'm hoping it is something simple.
I'm running Wordpress 2.9.2 with "
The Morning After" theme.
I am trying to write a post where I want to display two small pictures, with captions, side-by-side and centered in
the middle of
the page.
Here is
the HTML code I am using to display
the images:
[caption align="alignnone" width="150" caption="Protein rest"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>[/caption]
[caption align="alignnone" width="143" caption="Saccharification rest" captionalign="center"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>[/caption]
I tried using "aligncenter" and "alignleft" for
the caption align - if I use "alignleft"
the pictures are lined up perfectly, but all
the way to
the left of
the page. If I use "aligncenter"
the pics are in
the center, but stacked one on top of
the other.
My first thought was to wrap
the images in a div using:
<div style="text-align:center;">image code</div>
but that doesn't work. Now, if I wrap in a centered div like that and omit
the [caption] tags, it works, but I need
the captions. Those caption tags are translated by Wordpress into it's own div of class wp-caption. I've also tried wrapping each separate image in its own div within a parent centered div wrapper.
Here is
the pertinent parts of
the style.css - please let me know if you need
any other info, and if you can help me, I will postpone jumping off
the nearest bridge!
Thanks!!
Style.css:
.aligncenter, div.aligncenter { display: block; margin: 14px auto; }
.alignleft { float: left; margin: 0 14px 10px 0; }
.alignright { float: right; margin: 0 0 10px 14px; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 14px; padding: 5px 4px 5px 5px; margin: 0; }
PS - I am aware of
the Gallery feature available in Wordpress, but would like to avoid it and would love to understand why wrapping in a div doesn't move
the whole kit to
the center.
Finally, just for
the sake of completeness, here is
the source of
the page when loaded using
the div wrapper and image code as above (so you can see how Wordpress translates
the caption tags):
<div style="text-align:center;">
<div class="wp-caption alignnone" style="width: 160px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg">
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>
<p class="wp-caption-text" style="text-align:center">Protein rest</p>
</div>
<div class="wp-caption alignnone" style="width: 153px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg">
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>
<p class="wp-caption-text" style="text-align:center">Saccharification rest</p>
</div>
</div>
