如何在单个 DIV 中居中 2 个图像答案

【问题标题】：How to center 2 images within a single DIV如何在单个 DIV 中居中 2 个图像
【发布时间】：2013-07-19 18:19:38
【问题描述】：

我有一个包含 2 个标签的 DIV 标签。我希望这些数字在 DIV 中居中，它应该在页面中间居中。我该怎么做？

HTML：

<div class="images-captions">
    <figure><img src="images/Prop Pics/From Mike B aka StratosDadRI/intial-blueprinting_thumb.jpg" alt="Intial Blueprinting"><figcaption>After intinal blueprint</figcaption></figure>
    <figure><img src="images/Prop Pics/From Mike B aka StratosDadRI/after-damage_thumb.jpg" alt="After Damage"><figcaption>After damage</figcaption></figure>
</div>

CSS：

.images-captions            { width: 600px; margin: 0 auto; }
.images-captions figure     { float: left; width: 250px; padding: 10px;}
.images-captions figcaption { text-align: center; font-style: italic;   }

【问题讨论】：

水平居中？垂直？
我实际上想将它们水平居中，然后划分图形之间的空间并将它们垂直居中。我在数字的正上方有一个标题，如果它们正确居中，标题应该正好在两者之间。

标签： css image html centering

【解决方案1】：

水平居中

这种情况我会这样解决：

CSS

.images-captions {
    width: 600px;
    margin: 0 auto;
    text-align: center;
}

.images-captions figure {
    display: inline-block;
    width: 200px;
    margin: 0;
    padding: 10px;
}

.images-captions figcaption {
    font-style: italic;
}

演示

Try before buy

垂直居中

你可以这样解决：

CSS

.images-captions {
    width: 600px;
    margin: 0 auto;
    text-align: center;
}

.images-captions figure {
    width: 200px;
    margin: 0 auto;
}

.images-captions figcaption {
    font-style: italic;
}

演示

Try before buy

【讨论】：

我试过你的代码水平居中，但还是不行。
@LakeJeffler 对你有用吗？你用的是哪个浏览器？

【解决方案2】：

可以通过在图中添加text-align来解决

.images-captions figure     { float: left; width: 250px; padding: 10px;text-align:center}
.images-captions figcaption { font-style: italic;   }

为了理解：
您想要对齐父容器中的文本。所以你必须将属性添加到父元素而不是元素本身

DEMO on fiddle

【讨论】：