如何垂直居中图片旁边的文字？

Question

我有以下代码，我希望将文本垂直居中放在图像旁边。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>