Spotify 克隆 - 页脚部分 - HTML、CSS

Question

1. 我尝试仅使用 HTML 和 CSS 克隆 Spotify，我已经获得了播放器部分，但我无法将播放器居中并获得其他两个详细信息，请检查所附图像。 名为“目标”的图像是我想要实现的目标，这里仅是该部分的代码。我还附上了名为“网站”的图片；这就是我的网站现在的样子。

https://imgur.com/PXbmnef - 这就是我想要的结果 https://imgur.com/9PDB9Lw - 这就是我的网站现在的样子

<div class="music-player">
      <div class="album">
        <div class="playing">
          <img src="assets/rapgod.jpeg" alt="rapgod" class="cover">
          <p class="cover-name">Rap God</p>
          <p class="artist">Eminem</p>
        </div>
        <div class="playing_icons">
          <i class="fa-regular fa-heart"></i>
          </div>
      </div>

      <div class="player">
        <div class="player-controls">
          <img src="/assets/player_icon1.png" alt="" class="player-controls-icon">
          <img src="/assets/player_icon2.png" alt="" class="player-controls-icon">
          <img src="/assets/player_icon3.png" alt="" class="player-controls-icon" style="opacity: 1; height: 2rem;">
          <img src="/assets/player_icon4.png" alt="" class="player-controls-icon">
          <img src="/assets/player_icon5.png" alt="" class="player-controls-icon">
        </div>
        <div class="playback-bar">
          <span class="current-time">00:00</span>
          <input type="range" min="0" max="100" class="progress-bar" step="1">
          <span class="curt-time">3:33</span>
        </div>
        <div class="controls"></div>
      </div>
    </div>

这是我的CSS注释（我已经写了两次音乐，因为当我用它来形成布局时，一个在顶部，一个在底部。我只包含了我面临问题的代码）

.music-player {
  background-color: black;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 72px;
}

.music-player {
  display: flex;
  justify-content: center;
  align-items: center;
}

.album {
  width: 25%;
}

.player {
  width: 50%;
}

.controls {
  width: 25%;
}

.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-controls-icon {
  height: 1rem;
  margin-right: 1.75rem;
  opacity: 0.7;
}

.player-controls-icon:hover{
  opacity: 1;
  transition: 0.2s;
}

.playback-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar {
  width: 70%;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
}

.progress-bar::-webkit-slider-runnable-track {
  background-color: #ddd;
  border-radius: 100px;
  height: 0.2rem;
}

.progress-bar::-webkit-slider-thumb {
  appearance: none;
  height: 1rem;
  width: 1rem;
  background-color: #1bd760;
  border-radius: 50%;
  margin-top: -6px;
}

.progress-bar::-webkit-slider-runnable-track:hover {
  background-color: #1bd760;
  transition: 0.2s;
}

.progress-bar::-webkit-slider-thumb:hover {
  background-color: #ddd;
  transition: 0.2s;
}

我尝试了多种繁荣，但没有一个成功

Answer 1

尝试使用 display: flex;证明内容合理；和对齐项目；到 div 类“player”。