如何在图像旁边垂直居中文本？ [复制]答案

【问题标题】：How to vertically center text next to image? [duplicate]如何在图像旁边垂直居中文本？ [复制]
【发布时间】：2017-03-05 16:47:35
【问题描述】：

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

.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>

【问题讨论】：

我投票决定将此问题作为题外话结束，因为只需搜索 SO，就会发现许多类似的答案。
@Paulie_D 这是一个重复的答案，我没有时间翻阅其中的众多。无论如何，我相信缺乏研究是结束这个的另一个原因。
缺乏研究不是“关闭投票”的原因......这是一个拒绝投票的原因。

标签： html css

【解决方案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>

【讨论】：