列中居图像（液体布局）

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'而不是弃用的