如何使我的图像与文本完美居中？答案

【问题标题】：How do I make my image perfectly centered with the text?如何使我的图像与文本完美居中？
【发布时间】：2022-01-21 09:20:15
【问题描述】：

我尝试使用 display flex，但它们没有完全对齐，这个图像比文本有点宽，我不知道如何解决这个问题，这就是它在页面上的外观

#gym {
    width: 10%;
    height: 80%;
}

.side-bar {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: flex-start;
    background-color: rgb(230, 224, 224);
    width: 20%;
    height: 80%;
}

.side-bar ul {
    display: flex;
    flex-direction: column;
    margin-left: 10%;
    list-style: none;
    margin-top: 5%;
}

.side-bar ul li {
    margin-bottom: 20px;
}

.side-bar ul a {
    color: black;
    text-decoration: none;
}

<div class="side-bar">
<ul>
    <li><img src="gym.png" alt="gym logo" id="gym"><a href="#">Gym</a></li>
    <li><a href="#">Today</a></li>
    <li><a href="#">This Week</a></li>
    <li><a href="#">Tomorrow</a></li>
    <li><a href="#">Next Year</a></li>
</ul>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

添加到.side-bar ul li display: flex; align-items: center;

【讨论】：

将整个列表对齐在中间，而不是列表项
是的，我的错。试试 .side-bar ul li。如果需要，也可以使其显示灵活
这行得通，它确实可以完美地对齐项目，但它会在项目之间创建一个空间，通过修改边距来固定。
由于整个 li 元素也是 flex 现在您可以修改“justify-content: center;”属性也。或者你想要的任何方向，比如 flex-start、flex-end、space-round 等。

【解决方案2】：

.side-bar ul li {
  margin-bottom: 20px;
  display: flex;
}

.side-bar ul li a {
  align-self: center;
}

.side-bar ul li img {
  align-self: center;
}

【讨论】：