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

私は、現時点で画像だけを表示する画像ギャラリーを持っています。ギャラリーをこのように見せたい(私の簡単なテストギャラリー): http://jsfiddle.net/karin_A/Nmxx4/1/ すなわち、画像の下の中央のキャプション。

私がこれまで達成してきた最高のものは、キャプションが画像の右下に配置されているギャラリーです。

image example

htmlイメージコンテナ:

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

PHPの画像出力:

 $html .= '
        '.$xml->COM->MOVIE[$i]->attributes()->nameS.'
        ';

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;)を制限するとき、私はこの結果を得るラッピングの境界線: newdump あなたが見ることができるように、イメージ名が本当に短い場合には動作しますが、時にはそうではありません。

別の試み:

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

キャプションはイメージの下に中央に配置されますが、キャプションの幅だけでなく、ページ幅全体にもdivが入ります。

2
タグは自己閉じの要素なので、 ではなくと書いてください。
追加された 著者 sandeep,
キャプションのテキストをイメージの中央の下に表示しますか?
追加された 著者 Andres Ilich,
@カリンは、あなたがイメージを投稿することができるように余分な担当者のために昨日upvoted :)
追加された 著者 Andres Ilich,
私はそれに応じて自分のコードを編集しました。
追加された 著者 Karin,
はい、正確に!私は今、上記の画像をアップロードすることができます。
追加された 著者 Karin,

3 答え

.caption CSSクラスに clear:both を追加してみてください

0
追加された
あなたは問題を見ることができるあなたのアプリのページへのリンクを提供できますか?
追加された 著者 techfoobar,
ありがとうございますが、何も結果にはなりません。
追加された 著者 Karin,
まだオンラインではありませんが、もう1つの評価ポイントを獲得した時点でスクリーンショットを投稿します:)
追加された 著者 Karin,
上の例のスクリーンショット
追加された 著者 Karin,

.caption のテキストを自動的にセンタリングするように定義するだけです。

.caption {
   text-align:center;
}

Edit: demo

0
追加された
@KarinはあなたのCSSを使ってもう一度デモを試みましたが、それでもOKです。 jsfiddle.net/Nmxx4/6 ..あなたはあなたのコードを見てテストページを投稿できますか?
追加された 著者 Andres Ilich,
@ Karinは、Chromes Developer ToolsでCSSをチェックして、周囲のコードによって何かが変更されているかどうかを確認します。
追加された 著者 Andres Ilich,
ありがとうございますが、上記のコードでは動作しません。それは私のテストフィドルでうまく動作します。私はまた、1つのdiv、1つのdivのキャプション、および両方のラップdivでイメージを配置してから、内側のdivを配置しようとしましたが、同じ結果が得られました。
追加された 著者 Karin,
それは本当にフィドルに良い見えます!たぶん私の本当の問題は、周囲のコード(私は書いていないし、共有することはできませんでした)です。問題を攻撃する別の方法を見つけて、後でここに戻ることができるかどうかがわかります。
追加された 著者 Karin,
jQueryモバイルには、「alt」を妨害してハイパーリンクにするものがあるようです。私はそれをプレーンテキストにしたいだけです。
追加された 著者 Karin,

私は動作する解決策を見つけました。新しいdivを新しいスパンに変更しました。

$.each($("img.imgAlt"), function() {
    var imgAlt = this.alt;
    $(this).empty().after(''+ imgAlt +'');
});

.captionのためのCSSをこれに変更しました:

.caption{
    display: block;
    text-align: center;
    text-decoration:none;
    clear:both;
    text-align:center;
    font-size:80%
}
0
追加された
PHP - 日本のコミュニティ [ja]
PHP - 日本のコミュニティ [ja]
4 参加者の

このグループではPHPについて話します。 パートナー:kotaeta.com