我有一个包含 2 个标签的 DIV 标签。我希望这些数字在 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
.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;
}
演示
垂直居中
你可以这样解决:
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;
}
演示
关于css - 如何在单个 DIV 中将 2 个图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17743448/