Html 如何对齐每张照片下方的标题？

我试图做一个照片库时，用户可以上传照片和显示他们。多张照片显示在同一行中，但我想在每张照片下添加标题，但我无法管理它。有人能帮我吗

以下是我的HTML/PHP代码： $image\u path是上载的照片，basename（$image\u path）是标题

.container.gallery a img{
浮动：左；
位置：相对位置；
高度：150像素；
宽度：20%；
边框：2倍实心#fff；
-webkit转换：-webkit转换。15秒易用性；
-moz转换：-moz转换。15秒易用性；
-o-转换：-o-转换。15秒易用性；
-ms转换：-ms转换。15秒易用性；
转变：转变。15秒轻松；
对象匹配：覆盖；
}

---

我想你需要这样的东西，不是吗

图{
填充物：5px；
最大宽度：150px；
保证金：自动；
显示：内联块；
}
菲卡普顿{
背景色：#222；
颜色：#fff；
字体：斜体小号无衬线；
文本对齐：居中；
}

日落时的大象
日落时的大象
日落时的大象
日落时的大象
日落时的大象

为

basename

添加一个div，并尝试将此css应用到其中

.basename{
最高：90%；
左：50%；
位置：绝对位置；
转换：翻译（-50%，-50%）；
}

尝试添加：

.container .gallery {
    width: 20%;
    position: relative;
    float: left;
    text-align: center;
}

---

并替换

float:左到<代码>浮动：无&
宽度：100%在
.container.gallery a img
尝试将
基本名称（$image\u path）
包装在
h3
元素中，并使用
文本对齐：居中设置样式@RamondeVries它不起作用，因为这样照片就不是内联的，而是像步进的？标题混乱地分散在它们之间：（谢谢，但现在所有的标题都在底部，相互对齐：（我试过了，照片放在彼此下面，标题放在旁边，非常感谢！！它很有魅力。但是现在有一个小问题——如果标题很长，它会覆盖下一个标题。如何解决它？我想图像之间的距离越长越好，所以可能会移动到另一行？好的，我知道了，尝试添加溢出：隐藏；妈rgin:auto；width:85%；到标题，并告诉我它是否正确工作是的，它工作：）而且当我简单地将标题打包到一个div中时，它看起来很好。非常感谢您的帮助！