Alan Tingey Alan Tingey - 1 month ago 13
CSS Question

Vertically Align Image with Text Fails

I have the following code:

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


Which produces:

enter image description here

Whatever I attempt with the style I just can't seem vertically align the text with the image. Any help would be greatly appreciated.

Many thanks, Alan.

Answer Source

i have used flex , here is the demo, try with below snippet

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