キャプションを正しく配置する方法

Question

私は現在、画像のみを表示する画像ギャラリーを持っています。ギャラリーをこのように見せたい（私の簡単なテストギャラリー）： http://jsfiddle.net/karin_A/Nmxx4/1/ つまり画像の下の中央にキャプションがあります。

私がこれまでに達成することができました最高のキャプションは、画像の右下のそれに置かれるギャラリーです：

HTMLイメージコンテナ：

<div data-role="content" id="pagecontent" class="gallerycontent"> 
    <?= $output ?> 
     </div> 

PHPの映像出力：

$html .= '<a href="#imgshow" data-transition="pop" data-index="'.$i.'" data-rel="dialog" id="thumb"> 
     <img src="https://[url]/'.rawurlencode($this->_decode_path($xml->COM->MOVIE[$i]->attributes()->dbIcoFilename)).'" alt="'.$xml->COM->MOVIE[$i]->attributes()->nameS.'" class="imgAlt"> 
     </a>'; 

jQueryのは、ラッピングが追加されます境界線とキャプション：

$.each($("img"), function() { 
     $(this).wrap('<div class="wrapper"/>'); 
    }); 
    $.each($("img.imgAlt"), function() { 
     $(this).after($(this).attr("alt")); 
    }); 

CSS：

#pagecontent { 
text-align:center; 
font-size:12px; 
color:#000; 
text-decoration:none; 
} 

.wrapper{ 
    float:left; 
    padding:0.2em; 
    border: 1px solid #C0C0C0; 
    margin:10px; 
} 

.thumb{ 
    padding: 0.1em; 
    margin-right: 10px; 
    margin-bottom: 15px; 
} 

.gallerycontent a img { 
    margin: 0.2em; 
} 

.caption{ 
    float:left; 
    width:100%; 
} 

私は、幅（幅：100pxにし;）を制限するとラッピングの境界線が、私はこの結果を取得する場合：あなたが見ることができるよう、 を、イメージ名が本当に短い場合には機能しますが、時にはそうではありません。

もう一つの試み：

$.each($("img.imgAlt"), function() { 
     var title = this.alt; 
     $(this).after('<div class="caption">'+ title +'</div>'); 
    }); 

画像の下中央にキャプションを配置するだけでなく、div要素は、ページ全体の幅、キャプションの幅だけでなく埋めることができます。

Answer 1

demo 。

$.each($("img.imgAlt"), function() { 
    var imgAlt = this.alt; 
    $(this).empty().after('<span class="caption">'+ imgAlt +'</span>'); 
}); 

をし、これに.captionのCSSを変更：私は、代わりに新しいスパンに新しいdiv要素を作っ

.caption{ 
    display: block; 
    text-align: center; 
    text-decoration:none; 
    clear:both; 
    text-align:center; 
    font-size:80% 
} 

Answer 2

てみ

Answer 3

はちょうどあなたの.captionテキストを定義clear:bothあなた.caption CSSクラスにそうように、自動的にセンタリングすることへの追加：

.caption { 
    text-align:center; 
} 

編集：私は働く解決策を見つけ