html - CSS 样式以便按照我希望它们在我的页面上的方式正确对齐 img？

Question

我很讨厌 CSS 样式。我试图在此处对齐这些 Logo :

      <a href="https://geo.music.apple.com/us/album/_/1460176267?mt=1&app=music&at=1000lHKX">
          <img id="apple" src={apple}></img>
      </a>
      <a href="https://open.spotify.com/album/6ITBoE1l1zPCtXKOTN12IC">
          <img id="spotify" src={spotify}></img>
      </a>
      <a href="https://www.pandora.com/artist/various-artists/love-hart-presents-hartfm-explicit/AL2V7Pb7xcg7p74">
          <img id="pandora" src={pandora}></img>
      </a>
      <a href="https://listen.tidal.com/album/107846023">
          <img id="tidal" src={tidal}></img>
      </a>

在我页面的其他地方(它们位于左上角)，但是当我尝试这样应用 CSS 规则时:

#apple {
  top: 75%;
  left: 34.5%;
  width: 4%;
  height: 4%;
}

#spotify {
  width: 3.5%;
  height: 3.5%;
}

#pandora {
  top: 10px;
  left: 10px;
  width: 6%;
  height: 8%;
}

#tidal {
  width: 4%;
  height: 4%;
}

它们实际上并没有移动。不知道在这里做什么。

Answer 1

我将您所有的 a 标签包装在一个 div 中，并给它一个 id="parent"，这些每个标签似乎都可以做您可能想要的事情？

不过不确定您究竟希望“对齐”什么或如何“对齐”，所以我在下面提供了一些选项。希望其中之一是您正在寻找的，您不需要顶部、左侧等，只需使用宽度和高度属性来调整 a 标签的大小。

#parent {
  display: flex;
  flex-direction: column;
}

#parent {
  display: grid;
  justify-content: center;
}

#parent {
  display: flex;
  justify-content: center;
}