【发布时间】：2019-08-12 14:10:45
【问题描述】：
大家好，我只想知道如何在图像中拖动鼠标时将这些文本放置在图像的中心，谁能帮忙？谢谢各位
我想在每个头像图像中拖动鼠标时将文本放在每个头像图像的中心谢谢你们我想在头像图像中居中文本每个头像应该在中心有一个文本
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>【问题讨论】：
-
top: 50%; left: 50%; transform: translate(-50%, -50%); -
@kukkuz 赞赏有 100 多个骗子，但这个问题还有更多的一些风格从根本上是错误的。例如，
<br>的使用和img的使用超出了宽度。 -
我添加了骗子，因为当我应用上述样式时，居中效果很好，这就是问题所在吗？ :)
-
@PraveenKumarPurushothaman 请随时重新打开（如果您愿意的话），因为您的回答传达了 OP 需要修复他们的代码的所有细节 - 最终这才是最重要的:)
-
@kukkuz 谢谢人...
:)