html - 最后一个头像是如何进入中心的，在它下面也是中心的音频

Question

音频和最后的头像是如何进入中心的？我希望最后一个头像在中心，在它下面是也在中心的音频，

请帮助我谢谢你们我只是在最后一张头像图片之后尝试音频进度没有到达中心请帮助你们非常感谢这只是为了学习新事物

最后一张头像是怎么放在中间的我又试了一次但是没用谢谢大家

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

	.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(17%, -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://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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 10</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">sample 11</div>
</div></div>
</center>
<center>
<br><br><br><br><br><br>
<div id="wrapper">
	<audio id="mytrack" controls>
		<source src="sample audio.com" type="audio/mp3">
	</audio>
	<nav>
		<div id="defaultBar">
			<div id="progressBar"></div>
			</div>
</center>

Answer 1

我尝试尽可能少地进行更改。这是您的问题的快速解决方案。将最后一张图像连同音频 div 与其他图像分开。您不需要使用 center 标签，您可以使用 margin: auto 将元素居中。

    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 {
    float: none;
    margin: auto;

}

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

.rows {
    display: inline-block;
}

    <div class="rows">
    <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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 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">sample 10</div>
        </div>
    </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">sample 11</div>
        </div>

    </div>
    <div id="wrapper" class="last container">
        <audio id="mytrack" controls style="width: 200px">
            <source src="sample audio.com" type="audio/mp3">
        </audio>
        <nav>
            <div id="defaultBar">
                <div id="progressBar"></div>
            </div>
    </div>
</div>