如何在图像旁垂直居中文本？

Question

我有以下代码，我想让文本垂直居中显示在图像旁边。

.section_content {
    width: 400px;
}

.section_content > ul > li > img {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.section_content > ul > li > a {
    vertical-align: top;
}

.section_content > ul > li {
    list-style-type: none;
}

.section_content > ul {
    list-style-type: none;

    padding-top: 45px;
    padding-left: 5px;
}

<div class="section_content">
        <ul>
            <li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li>
            <li>GitHUb</li>
        </ul>
    </div>

- SnelleJelle

---

我投票关闭此问题，因为只需在SO上搜索就可以找到许多类似的答案。 - Rob

@Paulie_D 这是一个重复的答案，我没有时间去查找其中的众多答案。无论如何，我认为缺乏研究是关闭这个问题的另一个原因。 - Rob

缺乏研究不是“关闭投票”的原因，而是“反对投票”的原因。 - Paulie_D

Answer 1

您已经使用了vertical-align: top，您需要将链接和图像的vertical-align都改为middle，这样才能使它们相邻且居中显示。

.section_content {
    width: 400px;
}

.section_content > ul > li > img {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.section_content > ul > li > a,
.section_content > ul > li img {
    vertical-align: middle;
}

.section_content > ul > li {
    list-style-type: none;
}

.section_content > ul {
    list-style-type: none;

    padding-top: 45px;
    padding-left: 5px;
}

<div class="section_content">
        <ul>
            <li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li>
            <li>GitHUb</li>
        </ul>
    </div>

- jack