【问题标题】：How to Center Caption Below Lightbox Image如何使灯箱图像下方的标题居中
【发布时间】：2015-03-15 14:40:57
【问题描述】：

我正在使用颜色框将这些图像放置在页面上：http://i.imgur.com/gN8SdBL.jpg

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

<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>

有

#maggie {text-align:center;}

在 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>

有

.maggie {text-align:center;}

在 CSS 中。两者都没有奏效。另一种选择是让 Maggie（第四张图片）居中，低于其他三张。我确信这会解决标题问题，而且随着业务的扩展，我需要将这些图片分成几行。提前感谢您的帮助！

编辑：这是我的完整 CSS：

<style type="text/css">
<!--

    /**div {margin:1em;}**/
    div:target {color:green;}

    #link {text-decoration:none;color:#000000}

    #banner {width:100%}
    #banner img {width:100%;height:auto}

    #maggie {text-align:center;}
    .maggie {text-align:center;}

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

    nav {width:100%;display:block;}
    nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#222419}
    nav li {display:inline-block;background-color:#222419;}
    nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;font-family:Arial, sans-serif;background-color:#222419;}
    nav a:hover {text-decoration:none}

    nav a{float:left;
    margin-right:58px;
    margin-left:58px;
    display:inline-block;
    text-decoration:none;} 
    .head {width:100%}
    .logo figure {display:block;}
    .logo {float:left;width:300px; margin-right:20px; padding:10px;font-family:Arial, sans-serif;}
    #large{margin-top:1000px; height:500px; weight:500px; alt:"Wesson"}

-->
</style>

我实际上能够通过从我的“徽标”类中取出围绕图形、链接和图像的内容来解决问题。所以现在看起来像这样：

<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（或创建 JSFiddle）？
完整的 CSS 现在在编辑部分中
请修正你的 CSS 中的拼写错误，很多标签，如.head {widht:100%} 将不会有效，#large{{margin-top:1000px; height="500px" weight="500px" alt="Wesson"} 也应该无效。要在浮动元素之间干净地分隔行，您可以在第三个元素之后创建一个像 div 一样的元素，clear:both，或者您应该去的任何地方

标签： jquery html css colorbox figure

【解决方案1】：

尝试更具体地使用您的 CSS：

.maggie figcaption {
  text-align:center;
}

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

【讨论】：

在小提琴中，我只添加了 .maggie {width:250px;} 以使标题居中在 chrome 中。 jsfiddle.net/rmzzh1yr/1

【解决方案2】：

你的图片说

weight=250px

而不是

width="250"

因此您的图像仅被调整为 250px 的高度属性。我认为你应该从添加开始

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

为了避免将您的图像扭曲成看起来很奇怪的正方形，然后您现在拥有的 text-align:center 应该可以工作。我的猜测是 Maggie 的图像在 Maggie 容器外面戳，使它看起来像是偏离了中心，而它与它所在的容器无关。

【讨论】：

【解决方案3】：

图片中的任何字幕都没有在我眼中居中。他们在左边有一个固定的边距。

你可以在这个小提琴中看到一个解决方案：http://jsfiddle.net/t6bjq1rs/1/

刚刚编辑了这部分 CSS：

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

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

http://jsfiddle.net/t6bjq1rs/7/ 在这里你可以看到一个小提琴，我将每个#maggie 设置为向左浮动。因此，如果需要，它只会“制作”更多行。这样，您还可以根据需要使网站更加适合移动设备。

【讨论】：