html - CSS水平图像对齐与图像标题

Question

我们的组织在内容管理系统中工作，为了加快速度，我们使用表格排列图片。我想摆脱这种做法，并提供正确执行此操作的路线图 (CSS)。

我们将图片并排排成一行，标题在图片下方，通常是两行文字。

这是我开始构建的示例。

<style>

 #piccaption
 {
font-size: x-small;
 }

 #picimages
 {
 text-align:center;
 margin:0px auto; 
 }

#picimages a
{
margin:0px 0px;
display:inline-block;
text-decoration:none;
color:black;
}

</style>

在我的 HTML 中使用它...

<div id="picimages">
<img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" />
<div id="piccaption"><span>Picture Caption</span><br />
<span>Second Line</span></div>
</div>
</div>

有人可以帮助我以正确的方式做到这一点，并将第二张、第三张图片放在第一张图片旁边，并在图片之间留出漂亮的填充吗？

谢谢，

戴夫

Answer 1

水平放置多个 block 的一种简单方法是将显示设置为内嵌 block ，并在两侧留出边距以按照您喜欢的方式将它们隔开。 Inline-block 适用于 Internet Explorer 8 及更高版本的所有浏览器(如果您确实需要使其与 Internet Explorer 7 兼容，您可以在 inline-block 之后添加 *display: inline)。

使用内联 block 而不是 float 的优势在于，即使图像的标题特别长，布局也不会像使用 float 那样中断。

此外，对于页面上多次出现的元素，请务必使用类而不是 ID。

这是一个基于您粘贴的代码的 jsFiddle 示例:http://jsfiddle.net/skymaiden/zvpHW/