Question

我一直在尝试通过使自己成为静态网页来学习一些基本的CSS / HTML。在页面底部，我想展示一些我去过的网站的32x32图像图标。

我想将它们内联显示并将它们放在页面的中心。现在我有3个图标，所以我创建了一个宽度为96（= 32x3）的块，并简单地将容器块居中。

但是我认为我很有可能需要在列表中添加更多图标，这意味着每次添加新图标时，我都需要重新计算容器块的宽度。 我想知道CSS中是否有规则会让我免于这样做？

例如，我可以简单地为文本字段执行text-align: center，无论我放入多少单词。图像块有类似的东西吗？

非常感谢！

更新

正如在cbp的回答中，text-align实际上也适用于img标签。谢谢你指出来了！

然而（抱歉之前没有说清楚），我并没有真正使用<img>而是<a>用CSS设置他们的背景图片。所以我猜两个后续问题：

1）text-align: center是否仍适用于此？ 2）在原始HTML <a>上使用<img>（CSS背景图像）是否更可取？使用任何优势吗？

再次感谢！

Answer 1

默认情况下， text-align：center 对图像的影响与对文本的影响相同，因为img标签默认情况下 display：inline 。

因此，您可以使包含您的imgs的元素具有 width：100％，然后将其 text-align：center 。

Answer 2

将Display:inline-block添加到您的图标<a>标记中。写得像这样：

    .icon{
     width:30px;
     height:30px;
     display:inline-block;
     *display:inline;/*For IE7*/
     *zoom:1;/*For IE7*/
    }
.parent{text-align:center;}

选中此http://jsbin.com/epusop/edit#html,live

Answer 3

text-align有点用词不当，因为它不会对文本起作用。所以，是的，您可以在图片的包含元素上使用text-align:center。

Sitepoint参考：text-align

Answer 4

你可以使用％元素中的填充和边距。

CSS自动增加块宽度

4 个答案: