Question

我有一个图片库，目前只显示图片。我希望画廊看起来像这样（我的简单测试库）： http://jsfiddle.net/karin_A/Nmxx4/1/ 即图像下方中心的标题。

到目前为止，我能够实现的最好的是一个画廊，其中标题位于图像的右下方但是：

image example

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;）如果包装边框我得到这个结果： newdump 正如你所看到的那样，如果图像名称非常短，但有时不是。

另一次尝试：

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

将标题置于图像下方，但也使div填充整个页面宽度，而不仅仅是标题的宽度。

Answer 1

尝试在clear:both CSS类

中添加.caption

Answer 2

只需将.caption文字定义为自动居中，就像这样：

.caption {
   text-align:center;
}

修改：demo

Answer 3

我找到了一个有效的解决方案。我将新的div改为新的范围：

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

并将.caption的css更改为：

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

如何正确放置我的字幕？

3 个答案: