使文本垂直对齐图像失败

Question

我有以下代码：

<a href="{% url 'selectteams' '0' '0'  %}" style="font-size: 20px" class="btn btn-default btn-block .btn-lg">
   <span style="vertical-align: middle;text-align: initial;margin: auto auto auto 0;">
     <img  height="42" width="42" src="/static/team_selection.svg" alt="Team Selection"/>
   <span>
   <span style="vertical-align: middle;text-align: initial;margin: auto auto auto 0;">TEAM SELECTION</span>
</a>

产生：

无论我尝试哪种风格，我都无法将文字与图像垂直对齐。任何帮助将不胜感激。

Answer 1

我使用过flex，这是演示，尝试下面的代码片段

＆＃13;

＆＃13;

.anchor {
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    display: flex;
    padding: 6px 15px;
    width: 200px;
    text-decoration: none;
    border-radius:4px;
}
.anchor img {
    max-width: 50px;
    padding-right: 5px;
}

＆＃13;

<a href="#" class="anchor">
	<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" alt="img" />
	<span>Team selection</span>
</a>

＆＃13;

＆＃13;

＆＃13;