Jquery 如何在灯箱图像下方居中放置标题

我正在使用颜色框在页面上定位这些图像：

如您所见，前三张照片的标题居中，但第四张太靠左。有办法解决这个问题吗？我两个都试过了：

<div class="logo">
    <figure id="maggie">
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

在CSS和

<div class="logo">
    <figure class="maggie">
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

在CSS中。两者都不起作用。另一个选择是让玛姬（第四张图片）居中，在其他三张图片的下方。我相信这会解决标题问题，而且随着业务的发展，我需要将这些图片分成几行。提前感谢您的帮助

编辑：这是我的完整CSS：

实际上，我可以通过从我的“logo”类中取出环绕图形、链接和图像的图标来解决这个问题。现在看起来是这样的：

<div>
    <figure>
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

与此相反：

<div class="logo">
    <figure>
        <a href="rsz_maggie.jpg" class="colorbox" id="link">
            <img src="rsz_maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
            <figcaption>Maggie, 16'' x 13''</figcaption>
        </a>
    </figure>
</div>

---

现在我最大的问题是弄清楚如何将这些图像分成不同的行。我在第三张和第四张图片之间已经有了一个刹车标签。

尝试更具体地使用CSS：

.maggie figcaption {
  text-align:center;
}

---

--请注意，演示正在运行，但我需要您的其他CSS，以确保它不会与项目中的其他CSS冲突（即，您可能需要删除会妨碍中心对齐的填充/边距或其他样式）

图像中的任何标题都不会在我的眼睛中居中。它们的左边有固定的边距

你可以在这把小提琴中看到一个解决方案：

刚刚编辑了CSS的这一部分：

#maggie {text-align:center;width:250px;}
.maggie {text-align:center;}

figcaption  {font-family:Arial,sans-serif;text-align:center;}

在这里你可以看到一把小提琴，我把每个麦琪都放在左边。因此，如果需要，它只是“生成”更多行。这样，如果需要的话，你也可以让网站更加移动友好

您的图像显示

weight=250px 

而不是

width="250"

因此，您的图像将仅调整为250px的高度属性。我想你应该先加上

.maggie img {
    width: 250px;
    height: auto;
}

---

为了避免将图像扭曲成奇怪的正方形，现在使用的文本align:center应该可以工作。我猜是Maggie的图像戳到Maggie容器外面，使它看起来像是偏离了中心，而不是相对于它所在的容器。

你能分享相关的CSS（或创建一个JSFIDLE）来重现你的问题吗？完整的CSS现在在编辑部分请修复CSS中的拼写错误，很多像

.head{widht:100%}

这样的标签实际上什么也做不了，而

#large{{margin top:1000px；height=“500px”weight=“500px”alt=“Wesson”}

也不应该做任何事情。要在浮动元素之间清晰地断开行，可以在第三个元素之后创建一个类似div的元素，使用

clear:both

，或者在我刚刚添加的

中的任何位置断开行。maggie{width:250px；}

使标题在chrome中居中。

weight=250px 

width="250"

.maggie img {
    width: 250px;
    height: auto;
}