最后一個頭像是如何進入中心的，在它下面也是中心的音頻

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>