以列为中心的图像（流式布局）

Question

我的目标是让这些图像中的每一个都在各自的列中居中，同时保持液体布局。每个图像都应在每一列中居中（例如，每列一个标志居中）。任何帮助将不胜感激，因为这是一项任务。谢谢

HTML 和 CSS 代码

.two { 
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2; 
     }
            
            .column1    {
                width:33%;
                float:left;
            }
            
            .column2    {
                width:33%;
                display: inline-block;
            }
            
            .column3    {
                width:33%;
                float:right;
            }

<p class="two">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
   no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
   consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
   dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
   dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
   dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
            takimata sanctus est Lorem ipsum dolor sit amet.</p>
    
       <p class="column1">
     <img src="australia_flag.jpg" height="200" width="300" /> <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
   no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
   consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
   dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
   dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
   dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
   takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
        
        <p class="column2">
     <img src="brazil_flag.jpg" height="200" width="300" /> <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
   no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
   consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
   dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
   dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
   dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
   takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
        
        <p class="column3">
     <img src="china_flag.jpg" height="200" width="300" /> <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
   no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
   consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
   dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
   dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
   dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
   vero eosle et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
   takimata sanctus est Lorem ipsum dolor sit amet.
  </p>

谢谢！

Answer 1

只需将 CSS 添加到每张图片即可：

image {
    display: block;
    margin: 0 auto;
}

margin: 0 auto 会自动设置边距（使它们居中）。 display: block 是使页边距起作用所必需的（在 inline-block 上不起作用，默认情况下是图像。

看到它在 JSFiddle 上运行。

此外，避免使用已弃用的 width 和 height 属性；使用 CSS width 和 height 代替。

Answer 2

据我所知，还有其他几种选择，因为我在任何方面都不是专业人士。

如果有效的话，你也可以试试

image {
    display: flex;
    align-items: center;
}

是的，最好使用 CSS 'width' 和 'height' 而不是已弃用的

以列为中心的图像（流式布局）

Centering image in columns (liquid layout)

html

center

multiple-columns