Vertical Align List Item Contents

1

Hello all,

I’m struggling with some CSS positioning (again :smirk:).

I’m almost done with the Twitch API project, but I’m having trouble vertically centering the contents in my list items. The vertical-align CSS property doesn’t seem to work in this case. Any guidance is appreciated. Thanks.

https://codepen.io/drustin/pen/rzgGmN

Edit:
Also if anyone has links to some good CSS positioning exercises, that would be appreciated as well :).

2

Hey. As a way of doing this, you could make use of flexbox and simply give the <li> a display:flex and align-items:center. That will vertically center all the elements inside of them.

.streamers li {
    ...
    display: flex;
    align-items: center;
}

Your vertical-align isn’t working 'cause it works only on inline elements and table cells (as it stands, only your anchor is inline). If you remove the floating from both the image and the paragraph, and add a display:inline-block and vertical-align:middle to your image, it’ll work but then your layout would be messed up.

You could’ve also used display:table and display:table-cell (see here for more infos about display types), but then again, I feel like the flexbox properties makes it easier.

1 Like
3

Thanks @noyb, I’ve been seeing a lot of references to flex boxes for others facing similar display problems. I’ll need to check out the css-tricks samples more and get in the habit of using them. Your help is always appreciated.