How to vertically center text next to image?

Question

I have the following code and I want to center the text vertically next to the image.

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

I'm voting to close this question as off-topic because there are a multitude of similar answers found by just searching SO. — Rob, Oct 24 '16 at 01:13
@Paulie_D It's a duplicate answer and I didn't have time to rummage through the multitude of them. In any case, I believe a lack of research is another reason to close this. — Rob, Oct 24 '16 at 11:42
Lack of research is not a "CLOSE Vote" reason...It's a DOWN vote reason. — Paulie_D, Oct 24 '16 at 11:44

score 3 · Accepted Answer · answered Oct 24 '16 at 01:07

You've got vertical-align: top in there; what you want is vertical-align: middle, on both the link and the image it's supposed to sit next to.

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

How to vertically center text next to image?

1 Answers1