垂直对齐一种类型的内容
垂直对齐一种类型的内容
提问于 2022-05-31 00:58:06
我一直在努力制作我自己的链接树，但是我在努力处理我的内容的位置，我想让我的文本固定在中间，然后根据屏幕的大小改变图标的位置。
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.stack.imgur.com/5yKAQ.png
我想要的是：
https://i.stack.imgur.com/YLMU8.png和https://i.stack.imgur.com/LQ2xY.png
Stack Overflow用户
发布于 2022-05-31 01:04:57
一种可能的解决方案-保持标签中心和使用绝对的img。
将这些添加到现有样式中
img {
...
position: absolute;
left: 0; // Change this on screen size with media query
}
li {
...
position: relative;
justify-content: center;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72441257
复制相关文章
相似问题
腾讯云开发者
