编辑：这是我的完整CSS：

Question

我正在使用颜色框将这些图片放在页面上：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>

我实际上能够解决问题，方法是将数字，链接和图像包围在我的＆＃34;徽标＆＃34;类。所以现在它看起来像这样：

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

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

Answer 1

尝试更具体地使用CSS：

.maggie figcaption {
  text-align:center;
}

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

Answer 2

图像中的所有字幕都不在我眼中。它们左边有一个固定的边距。

你可以在这个小提琴中看到一个解决方案：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设置为向左浮动。因此，如果需要，它只会“制造”更多行。这样，如果需要，您还可以使网站更加适合移动设备。

Answer 3

你的形象说

weight=250px

而不是

width="250"

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

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

要避免将图像变形为看起来很奇怪的正方形，然后你现在应该使用text-align：center。我的猜测是Maggie在maggie容器外面戳的图像使它看起来像偏离中心，当它与它所在的容器不相关时。

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

编辑：这是我的完整CSS：

3 个答案: