仅垂直对齐一种类型的内容

Question

我一直在尝试制作自己的链接，但是我正在努力在内容的位置上挣扎，我想让我的文本固定在中间，然后根据屏幕的大小更改图标的位置

img {
  width: 5em;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  border: 0.15em solid white;
  border-radius: 5em;
  display: flex;
  align-items: center;
  width: 21rem;
  margin-bottom: 0.5rem;
  justify-content: space-evenly;
}

a {
  text-decoration: none;
  color: white;
}

<main>
  <ul>
    <a href="#" target="_blank">
      <li>
        <img src="./img/last.fm.png" alt="Last.fm">
        <p>Last.fm</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="./img/MyAnimeList.png" alt="MyAnimeList">
        <p>MyAnimeList</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="./img/Backloggd.png" alt="Backloggd">
        <p>Backloggd</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="./img/Letterboxd.png" alt="Letterboxd">
        <p>Letterboxd</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="./img/MyDramaList.png" alt="MyDramaList">
        <p>MyDramaList</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="./img/Serializd.png" alt="Serializd">
        <p>Serializd</p>
      </li>
    </a>
  </ul>
</main>

我将留下两个图像：页面的外观： https://i.sstatic.net/5ykaq .png

以及我希望它如何：
https://i.sstatic.net/ylmu8.png ：//i.sstatic.net/lq2xy.png“ rel =“ nofollow noreferrer”> https://i.sstatic.net/lq2xy.png

Answer 1

一种可能的解决方案 - 将标签保持为中心，并使用绝对将

其添加到现有样式中

img {
  ...
  position: absolute;
  left: 0; // Change this on screen size with media query
}

li {
   ... 
   position: relative;
   justify-content: center;
}

Answer 2

主要问题：您有一个静态宽度：21EM;在主父和内容上定义的超过该宽度。需要定义孩子的宽度。

而不是width：21EM，请根据最多的内容找到width，如果您有类似的DIVS。我发现250px是基于最长文本的好地方。

接下来，定义孩子的宽度。由于您只有两个孩子，每个li，我发现li＆gt;* {width：50％;}最好是最好的，因此每个人都占一半。

最后，一旦完成此操作，您将拥有类似于 this 的东西。我更喜欢使用填充从这里实现间距。另外，如果您喜欢左右的文本合理性，则可以使用GAP或保证金替换text-align：center;。这都是个人偏爱。

body {
  background-color: #414042;
}

img {
  max-width: 100%;
  border-radius: 2em;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

li {
  display: flex;
  align-items: center;
  gap: 35px;
  justify-content: space-evenly;
  padding: 10px 1.5em;
}

li>* {
  width: 50%;
}

a {
  width: 250px;
  border: 0.15em solid white;
  border-radius: 2em;
  text-decoration: none;
  color: white;
}

h1 {
  color: white;
  text-align: center;
  padding-left: 1em;
}

<main>
  <h1>Title</h1>
  <ul>
    <a href="#" target="_blank">
      <li>
        <img src="https://dummyimage.com/50/e1e1e1/000" alt="Last.fm">
        <p>Last.fm</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="https://dummyimage.com/50/e1e1e1/000" alt="MyAnimeList">
        <p>MyAnimeList</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="https://dummyimage.com/50/e1e1e1/000" alt="Backloggd">
        <p>Backlogged</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="https://dummyimage.com/50/e1e1e1/000" alt="Letterboxd">
        <p>Letterboxed</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="https://dummyimage.com/50/e1e1e1/000" alt="MyDramaList">
        <p>MyDramaList</p>
      </li>
    </a>

    <a href="#" target="_blank">
      <li>
        <img src="https://dummyimage.com/50/e1e1e1/000" alt="Serializd">
        <p>Serialized</p>
      </li>
    </a>
  </ul>
</main>