如何正确放置我的字幕？答案

【问题标题】：how to get my captions placed correctly?如何正确放置我的字幕？
【发布时间】：2012-02-27 19:30:39
【问题描述】：

我有一个图片库，目前只显示图片。我希望画廊看起来像这样（我的简单测试画廊）： 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 填充整个页面宽度，而不仅仅是标题的宽度。

【问题讨论】：

标签是一个自闭合元素，所以写这个而不是
我相应地编辑了我的代码。
并且您希望标题文本位于图像下方的中心？
是的，完全正确！我现在可以上传图片了，见上文。
@Karin 昨天投票支持该额外代表让您能够发布图片 :)

标签： php jquery css image html

【解决方案1】：

尝试将clear:both 添加到您的.caption CSS 类

【讨论】：

谢谢，但没有任何结果。
你能提供一个链接到你的应用程序中我可以看到问题的页面吗？
还没上线，等我再赚一个声望点我会发截图的:)
上面的例子截图。

【解决方案2】：

只需将 .caption 文本定义为自动居中，如下所示：

.caption {
   text-align:center;
}

编辑：demo

【讨论】：

谢谢，但它不适用于上面的代码。不过，它在我的测试小提琴中运行良好。我还尝试将图像放在一个 div 中，将标题放在一个 div 中，并且都放在一个包装 div 中，然后尝试定位内部 div，但结果相同。
@Karin 再次尝试使用您的 CSS 进行演示，但它看起来仍然不错，jsfiddle.net/Nmxx4/6 .. 您可以发布一个包含您的代码的测试页面来看看吗？
小提琴看起来真的很棒！也许我真正的问题是周围的代码（我没有写也不能分享）。我会看看我是否能找到另一种解决问题的方法，然后再回到这里。
@Karin 使用 Chrome 开发者工具检查 CSS，看看你周围的代码是否有任何改变。
在 jQuery mobile 中似乎有些东西扰乱了我的“alt”并使其变成了超链接。我只是希望它是纯文本。

【解决方案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%
}

【讨论】：