Question

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:

<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>
Protein rest

<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>
Saccharification rest

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 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 are 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>

Answer 1

I am not sure whether you are looking for

1. A Quick Fix via WordPress Editor using the caption and html code
2. A Quick Fix via WordPress html Editor recreating the caption code by hand
3. A Permanent fix via the functions.php file and the add_shortcode() in wp-includes/media.php
4. A Permanent Fix via CSS which might affect all captions.

I am giving 1 keeping your code as untouched as possible

<div style="text-align:center;">
// This should align the entire block [it worked for me at least]
    <div style="display:inline-block;">
        <div style="float:left;">
        // Takes care of the centering down the middle
            

<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>
Protein rest
        //Your caption code above with alignnone changed to aligncenter
        </div>
        <div style="float:left;">
            

<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>
Saccharification rest
        </div>
    </div> // End the Block Div
</div> // End the Center Div

[EDIT : Just saw you answered yourself -.- posting anyway :D]