html - 如何水平对齐图片？

Question

大家好我只想知道如何水平对齐这些图片因为垂直对齐我只想水平对齐谢谢你们

img {
  border-radius: 50%;
}
table, th, td {
  border: 1px solid black;
	}
	.container {
	  position: relative;
	  width: 20%;
	}

	.image {
	  opacity: 1;
	  display: absolute;
	  width: 50%;
	  height: auto;
	  transition: .5s ease;
	  backface-visibility: hidden;
	}

	.middle {
	  transition: .5s ease;
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 3%;
	  transform: translate(0%, -20%);
	  -ms-transform: translate(50%, 50%);
	  text-align: center;
	}

	.container:hover .image {
	  opacity: 0.5;
	}

	.container:hover .middle {
	  opacity: 1;
	}

	.text {
	  background-color: #dbe0dc;
	  color: black;
	  font-size: 16px;
	  padding: 10px 20px;
	}
	.column {
	  float: left;
	  width: 33.33%;
	  padding: 5px;
	}
}

<div class="container">
<img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png" class="image" alt="Avatar" style="width:200px">
<div class="middle">
    <div class="text">Avatar sample</div>
  </div></div>
  <div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREEGUm8xTq6g_39HvAO-LDynq64MqzfEyHenC3E5Sz0Ci5DWck" class="image" alt="Avatar" style="width:200px">
<div class="middle">
    <div class="text">Avatar sample 2</div>
  </div>

Answer 1

添加 float :左；在如下所示的容器类中，它将起作用....

.container {
   position: relative;
   width: 20%;
   float: left;
}