Stacking two side-by-side images and centering in Wordpress

Question

It makes me absolutely nuts. I'm not the most experienced with CSS, so I hope this is something simple.

I am running Wordpress 2.9.2 with the theme "Morning After."

I am trying to write a message where I want to display two small pictures with inscriptions, side by side and centered in the middle of the page.

Here is the HTML code that I use to display 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" to align the title - if I use "alignleft", the images line up perfectly, but completely to the left of the page. If I use "aligncenter", the photos are in the center, but stacked one on top of the other.

, div, :

<div style="text-align:center;">image code</div>

. , div [caption], , . Wordpress div wp-caption. div div .

style.css - , , - , , !

!!

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 - Gallery, Wordpress, , div .

, , div , ( , Wordpress ):

<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

,

• Wordpress Editor html-
• Wordpress html,
• functions.php add_shortcode() wp-includes/media.php
• CSS, .

1,

<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
            [caption align="aligncenter" 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]
        //Your caption code above with alignnone changed to aligncenter
        </div>
        <div style="float:left;">
            [caption align="aligncenter" 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]
        </div>
    </div> // End the Block Div
</div> // End the Center Div

[: , . - : D]

Answer 2

, , , div . , , , ( ), div , div div , . , html:

<center>
<div width="300">
<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>
<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>
</div>
</center>

, CSS, , .

, . -Gale

Answer 3

, , - .

CSS :

.stackwrapper {max-width: 311px;margin: 0 auto;}
#div1 {width: 162px;float: left;}
#div2 {margin-left: 162px;}

, , , . , 150 , - 137 . 5px padding 1px, 311px ( + 10px L & R + 2px L & R- ).

​​ , : 0 , , ( , ... - ?)

image1 div1 ( + + ) image2 div2 ( )

, , Wordpress, html .

, .

Answer 4

, (!), , - .

( Word.php Wordpress) CSS, , ( , ).

, . , [caption] , , ( , ), .

[side_by_side] [/caption], , . ( - - , , ), div.

, " ", ! , . , , :) PS - , - , , html, , , . - /, , PHP, , ...

/* CUSTOM FUNCTION ADDED BY JIM - 5/20/2010 TO ALLOW CENTERING SIDE-BY-SIDE IMAGES */

add_shortcode('side_by_side', 'side_by_side');

function side_by_side($attr, $content = null) {

extract(shortcode_atts(array(
    'align' => 'center'
), $attr));

$images = explode( "[/caption]", $content, -1);
foreach($images as &$image)
{
    $image = $image.'[/caption]';
}

$img = array();
foreach($images as $img_tag)
{
preg_match_all('/width=\"(.*?)\"/i', $img_tag, $img[$img_tag]);
}

$widths = array();

for ($i = 0; $i < count($images); $i++)
{
    $firstval = $img[($images[$i])][1][0];
    $secondval = $img[($images[$i])][1][1];
    if ($firstval >= secondval)
        $widths[$i]=$firstval;
    else
        $widths[$i]=$secondval;
}

return '<div class="main-img-wrap wrap' . esc_attr($align) . '" style="max-width: ' . (24 + (int) $widths[0] + (int) $widths[1]) . 'px"><div class="sub-img-wrap" style="width: '
. (12 + (int) $widths[0]) . 'px">' . do_shortcode( $images[0] ) . '</div><div style="margin-left: ' . (12 + (int) $widths[0]) . '">' . do_shortcode( $images[1] ) . '</div></div>';
}

CSS:

/* centered side-by-side image wrappers, added by Jim 5/20/2010 */

.main-img-wrap {} /* left blank for future style enhancements */
.sub-img-wrap {float: left;}
.wrapcenter {margin: 0 auto;}
.wrapright {float: right; margin: 0 0 10px 14px;}
.wrapleft { float: left; margin: 0 14px 10px 0; }