如何将头像放在头像图像的中心

Question

嗨，我只是想知道如何在将鼠标拖动到图像内部时将这些文本放置在图像内部，任何人都可以帮忙吗？谢谢你们

当我在其中拖动鼠标时，我想将文本放置在每个头像图像的中心谢谢大家，我想将每个应该有文本的头像放在头像图像的中心

img {
  border-radius: 50%;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 10px solid white;
}

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

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

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

.last {
  /*position: relative;
  float: none;
  margin: auto;*/
  display: inline-block;
  float: none;
}

.audio {
  position: relative;
  float: none;
  margin: auto;
}

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

.text {
  background-color: #dbe0dc;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}


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

<center>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 1</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 2</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 3</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 4</div>
    </div>
  </div>
  <div class="last container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 5</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 6</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 7</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 8</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 9n</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 10</div>
    </div>
  </div> <br>
  <div class="last container"><br>
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px"> <br>
    <div class="middle">
      <div class="text">avatar 11</div>
    </div>
  </div>
  <Br>
</center>

Answer 1

  

我会说这不是重复的，恕我直言，因为存在以下缺陷，请参见第1点和第2点。

通过以下更改，我可以使其居中：

1. 为img和max-width提供一个不超过容器的容器。
2. 死心招。请参阅.middle类。
3. 由于您使用的是float: left，因此无需休息，因此br {display: none;}。

img {
  border-radius: 50%;
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 10px solid white;
}

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

br {display: none;}

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

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

.last {
  /*position: relative;
  float: none;
  margin: auto;*/
  display: inline-block;
  float: none;
}

.audio {
  position: relative;
  float: none;
  margin: auto;
}

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

.text {
  background-color: #dbe0dc;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}


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

<center>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 1</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 2</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 3</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 4</div>
    </div>
  </div>
  <div class="last container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 5</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 6</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 7</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 8</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 9n</div>
    </div>
  </div>
  <div class="container">
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 10</div>
    </div>
  </div> <br>
  <div class="last container"><br>
    <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" class="image" alt="Avatar" style="width:200px"> <br>
    <div class="middle">
      <div class="text">avatar 11</div>
    </div>
  </div>
  <Br>
</center>

预览