How can I align an image and text on the same line, as currently the a tag is higher than my text?
Here is the HTML code:
<div class="author-name">
<img class="article-author-img" src="{{ preload(asset('assets/static/images/sarah/person-icon.png')) }}"/>
By <a href="https://track.theincrediblemehtod.com" target="_blank">Dexter McBride</a>
</div>
<div class="article-date">
<img src="{{ preload(asset('assets/static/images/sarah/clock-icon.png')) }}" class="article-author-img "/>
And here is the CSS code:
.article-author {
padding-top: 4px;
padding-bottom: 5px;
color: #494949;
.author-name {
font-size: 19px;
a {
color: #e80222;
text-decoration: underline;
font-family: $fontOpenSansBold;
}
}
.article-date {
text-transform: uppercase;
font-size: 15px;
}
.article-author-img {
padding-right: 10px;
}
}
I have tried using vertical-align: middle; but it didn't work.