Php 如何正确放置我的字幕？

我有一个图像库，目前只显示图像。我希望图库看起来像这样（我的简单测试图库）： i、 e.图片下方中央的标题

到目前为止，我所能达到的最好效果是一个图库，其中的标题放在下面，但在图像的右侧：

html图像容器：

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

当我限制宽度（宽度：100px；）时，如果包装边框我得到以下结果： 如您所见，如果图像名称很短，则可以使用该名称，但有时并非如此

另一种尝试：

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

$。每个（$（“img.imgAlt”），函数（）{
var title=this.alt；
$（此）。在（“”+标题+“”）之后；
});

---

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

尝试在

中添加
clear:both
。标题

CSS类

尝试在

中添加
clear:both
。标题

CSS类

只需定义你的

。标题

文本自动居中，如下所示：

.caption {
   text-align:center;
}

---

编辑：

只需定义要自动居中的

.caption

文本，如下所示：

.caption {
   text-align:center;
}

---

编辑：

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

$。每个（$（“img.imgAlt”），函数（）{
var imgAlt=this.alt；
$（this）.empty（）。在（''+imgAlt+''）之后；
});

并将.caption的css更改为：

。标题{
显示：块；
文本对齐：居中；
文字装饰：无；
明确：两者皆有；
文本对齐：居中；
字号：80%
}

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

$。每个（$（“img.imgAlt”），函数（）{
var imgAlt=this.alt；
$（this）.empty（）。在（''+imgAlt+''）之后；
});

并将.caption的css更改为：

。标题{
显示：块；
文本对齐：居中；
文字装饰：无；
明确：两者皆有；
文本对齐：居中；
字号：80%
}

谢谢，但这不会产生任何结果。你能在你的应用程序中提供一个链接，指向我可以看到问题的页面吗？它还没有上线，但我会在赢得一个信誉点后发布一个截图：）上面的示例截图。谢谢，但它不会产生任何结果。你能在你的应用程序中提供一个链接到我可以看到问题的页面吗？它还没有上线，但我会在我赢得一个更高的声誉点后发布一个屏幕截图：）上面示例的屏幕截图。标记是一个自动关闭的元素，所以写下它，而不是我相应地编辑代码。你想让标题文本位于图像下方的中心吗？是的，没错！我现在可以上传图像了，请参见上文。@Karin昨天投票决定让你的额外代表能够发布图像：）标记是一个自动关闭元素，所以写下它，而不是相应地编辑代码。你想让标题文本位于图像下方的中心吗？是的，没错！我现在可以上传图片了，请参见上文。@Karin昨天投票决定让你的额外代表能够发布图片：）谢谢，但上面的代码无法使用。不过，它在我的测试小提琴中很好用。我也尝试过将图像放在一个div中，标题放在一个div中，两个都放在一个换行div中，然后尝试定位内部div，但结果都是一样的。@Karin再次尝试了演示，将CSS放在顶部，它看起来仍然可以。。你能用你的代码发布一个测试页面来看看吗？它看起来真的很棒！也许我真正的问题是周围的代码（我没有编写，无法共享）。我会看看是否能找到另一种解决问题的方法，稍后再回来。@Karin使用Chromes Developer工具检查CSS，看看您周围的代码是否有任何变化。jQuery mobile中似乎有什么东西干扰了我的“alt”，并将其变成超链接。我只希望它是纯文本。谢谢，但它不能与上述代码一起工作。不过，它在我的测试小提琴中很好用。我也尝试过将图像放在一个div中，标题放在一个div中，两个都放在一个换行div中，然后尝试定位内部div，但结果都是一样的。@Karin再次尝试了演示，将CSS放在顶部，它看起来仍然可以。。你能用你的代码发布一个测试页面来看看吗？它看起来真的很棒！也许我真正的问题是周围的代码（我没有编写，无法共享）。我会看看是否能找到另一种解决问题的方法，稍后再回来。@Karin使用Chromes Developer工具检查CSS，看看您周围的代码是否有任何变化。jQuery mobile中似乎有什么东西干扰了我的“alt”，并将其变成超链接。我只希望它是纯文本。

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

.caption {
   text-align:center;
}