# Vertical Align List Item Contents

**URL:** <https://forum.freecodecamp.org/t/vertical-align-list-item-contents/146598>\
**Category:** General\
**Created:** [September 7, 2017, 7:11pm UTC](https://forum.freecodecamp.org/t/vertical-align-list-item-contents/146598 "2017-09-07T19:11:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Drustin2](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/drustin2/32/64435_2.png) [@Drustin2](https://forum.freecodecamp.org/u/Drustin2)\
**Post date:** [September 7, 2017, 7:11pm UTC](https://forum.freecodecamp.org/t/vertical-align-list-item-contents/146598/1 "2017-09-07T19:11:05Z")

</div>

Hello all,

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

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](https://codepen.io/drustin/pen/rzgGmN)

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

---

<div class="post-metadata">

**Author:** ![noyb](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/noyb/32/66148_2.png) [@noyb](https://forum.freecodecamp.org/u/noyb)\
**Post date:** [September 7, 2017, 7:36pm UTC](https://forum.freecodecamp.org/t/vertical-align-list-item-contents/146598/2 "2017-09-07T19:36:51Z")

</div>

Hey. As a way of doing this, you could make use of [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and simply give the `<li>` a `display:flex` and `align-items:center`. That will vertically center all the elements inside of them.

```auto
.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](https://css-tricks.com/almanac/properties/d/display/) for more infos about display types), but then again, I feel like the flexbox properties makes it easier.

---

<div class="post-metadata">

**Author:** ![Drustin2](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/drustin2/32/64435_2.png) [@Drustin2](https://forum.freecodecamp.org/u/Drustin2)\
**Post date:** [September 11, 2017, 2:20am UTC](https://forum.freecodecamp.org/t/vertical-align-list-item-contents/146598/3 "2017-09-11T02:20:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:52pm UTC](https://forum.freecodecamp.org/t/vertical-align-list-item-contents/146598/4 "2021-01-16T17:52:59Z")

</div>

Closed on January 16, 2021, 5:52pm UTC