Icon and Text not centered

Issue

I have the problem that the logout symbol is placed slightly higher than Logout.

I tried adding margin to make the icon the same height and in the same row as the text, but that doesn't seem to work.

.dropdown-content {
    position: absolute;
    width: 120px;
        padding: 14px;
        background-color: yellow;
}

#logout-icon {
    width: 20px;
}

<div>
    <div class="dropdown-content">
        <img id="logout-icon" src="https://cdn.icon-icons.com/icons2/2518/PNG/512/logout_icon_151219.png">
        <span>Logout</span>
    </div>
</div>

Solution

The easy fix is to use FlexBox for .dropdown-content.

Here is an example:

.dropdown-content {
    position: absolute;
    display: flex;
    align-items: center;
    width: 120px;
    padding: 14px;
    background-color: yellow;
}

Answered By - Ilya Khrustalev