將兩張圖片並排並以Wordpress爲中心集中在一起

Question

這使我絕對瘋狂。我不是最有經驗的CSS，所以我希望它是簡單的。

我用「The Morning After」主題運行Wordpress 2.9.2。

我想寫一篇文章，我想要顯示兩個小圖片，標題，並排和居中在頁面中間。

下面是HTML代碼我用來顯示圖像：

[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] 

我試圖用「aligncenter」和「alignleft」爲標題對齊 - 如果我使用「alignleft」的照片一字排開完美，但一直到頁面的左側。如果我使用「aligncenter」，則圖片位於中心，但是會一個疊在另一個的上面。

我首先想到的是用包裹在一個div圖像：

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

，但不起作用。現在，如果我用這樣的中心div來包裝並省略[caption]標籤，它就可以工作，但我需要標題。這些標題標籤由Wordpress翻譯成它自己的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 - 我知道在WordPress的可用的庫功能的，但想避免它，很想知道爲什麼包裝在一個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

我不知道您是否使用的標題和HTML代碼尋找

1. 通過WordPress的編輯器快速修復
2. 通過WordPress的HTML編輯器，快速修復手工重新創建字幕碼
3. 通過wp-includes/media.php中的functions.php文件和add_shortcode（）永久修復
4. 通過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;} 

認識到，這個剛剛編碼，以滿足我的眼前需求，所以寬度被硬編碼爲我工作的訊息。基本上，一個圖像是150px寬，另一個是137px。標題代碼爲每個圖像添加5px的填充和1px邊框，因此我的並排圖像的總寬度爲311px（圖像寬度+ 10px每個圖像的R填充+ 2px L &）。

包裝設置爲該寬度和保證金：0汽車似乎居中（雖然不知道是什麼原因...誰能給我介紹？）

然後我在DIV1包裹圖像1（與它的圖像+填充+邊框寬度）和image2在div2（其邊緣左側設置爲第一個圖像的寬度）

似乎工作很好，現在我需要在wordpress代碼中編碼，因此我可以指定圖像寬度並讓它在飛行中生成html。

感謝大風，你讓我想到了設置寬度的思路。

Answer 4

不知道這是否是正確的堆棧禮儀回答我自己的帖子兩次（！），但我想把這個代碼放在那裏，以防別人幫助其他人。

這裏有一個自定義函數（粘貼在你的Wordpress主題的function.php文件中）和附帶的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; }