html - 居中对齐一系列环绕图像的正确方法是什么？

Question

抱歉标题不好，但我想不出如何说得更清楚。我在一个 div 中有一系列图像:

 <div class='container'>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
 </div>

我试图让图片并排 float ，如果不合适则换行。通常我会用 float 来实现这一点，但是......我希望它们“居中”对齐。因此，如果容器比 3 个图像更宽，它们将出现在同一条线上的 div 中心，但如果容器更窄，最后一个元素将扭曲并居中于其他两个元素下方，等等。在经历了很多挫折之后列表、 float 和边距，我发现上面的结构和这个 css 有效。

 .container{
    text-align: center;
 }

这是处理这个问题的正确方法吗？我的 CSS 大脑的每个部分都在告诉我，这与使用表格来布置侧边栏一样糟糕。但真的是这样吗？

非常感谢!

Answer 1

Is this the correct way to handle this?

根据提供的标记，是的，这是将一组内联元素居中的正确方法。

text-align property 描述 block 的内联内容如何对齐。它不应该只影响文本，并且在编写 CSS 1 时命名不当。