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

Posted 2023-03-05

【中文标题】如何在图像旁边垂直居中文本？ [复制]

【英文标题】：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 这是一个重复的答案，我没有时间翻阅其中的众多。无论如何，我相信缺乏研究是结束这个的另一个原因。

缺乏研究不是“关闭投票”的原因......这是一个拒绝投票的原因。

【参考方案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>