时间戳

首页 > 解决方案 > 如何将出现的文本放置在最后一个图像头像的位置？

html - 如何将出现的文本放置在最后一个图像头像的位置？

问题描述

大家好，我在问为什么我的最后一个头像头像，是当我在最后一个头像中拖动鼠标时，文本出现在它的顶部，它应该像其他头像一样在头像里面，文本在里面图片。任何人都可以帮忙吗？感谢你们

最后一个居中头像的顶部也是当我将鼠标拖到那里时，没有出现任何文本，它应该像其他头像一样出现文本，当您拖动鼠标时，文本会出现

img {
    border-radius: 50%;
  }

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

  .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;
	
    
  }

  .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://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" 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://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 2</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 3</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 4</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 5</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 6</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 7</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 8</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 9</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 10</div>
</div></div>
 <div class="last container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 11</div>
</div></div>
</center>
<div id="wrapper" class="last container">
	<audio id="mytrack"  controls style="width:250px">
		<source src="audio . com" type="audio/mp3">
	</audio>
	<nav>
		<div id="defaultBar">
			<div id="progressBar"></div>
			</div>
</nav>
</div>

标签： htmlcss

解决方案

您可以更改：

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

至：

.last {
  display: inline-block;
  float: none;
}

inline-block：

不会在元素后添加换行符，因此该元素可以位于其他元素旁边。

img {
  border-radius: 50%;
}

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

.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;
}

.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;
}

/*} /*<< notice extra {*/*/

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

.container:hover .middle {
  opacity: 1;
}
<center>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" 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://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 2</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 3</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 4</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 5</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 6</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 7</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 8</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 9</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 10</div>
    </div>
  </div>
  <div class="last container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 11</div>
    </div>
  </div>
</center>
<div id="wrapper" class="last container">
  <audio id="mytrack" controls style="width:250px">
		<source src="audio . com" type="audio/mp3">
	</audio>
  <nav>
    <div id="defaultBar">
      <div id="progressBar"></div>
    </div>
  </nav>
</div>

推荐阅读