Vertically center content inside an inline parent - css

Question

Trying to create an adaptive post meta for a post card.
The idea is that sometimes the post meta could have more than one category inside and because of that I need somehow to wrap the items, but at the same time to vertically center the li content (like the avatar and icons).
I tried to apply display: inline-flex to the .entry-meta in order to be able to use the align-items: center property but in this case the list items - li's are not anymore wrapping nice like when applying display: inline to li.
1. The display: inline method (not centering items vertically)
This method is wrapping correctly and how I want all the list items but it can't center vertically the content (like the avatar and icons)
article {
max-width: 450px;
background: #eee;
font-family: arial;
font-size: 12px;
text-transform: uppercase;
}
article a {
text-decoration: none;
}
.entry-meta {
list-style: none;
margin: 0;
padding: 0;
}
.entry-meta li {
display: inline;
margin-right: 10px;
background: #ccc;
}
.avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background: #FA7059;
}
.icon {
display: inline-block;
width: 13px;
height: 13px;
background: #BE4C4E;
}
<article>
<ul class="entry-meta">
<li class="author">
<div class="avatar">
</div>
<span>By </span>
Admin
</li>
<li class="date">
<span>On </span>
<time>Feb 22, 2019</time>
</li>
<li>
<span>On </span>
2 Comments
</li>
<li class="categories">
<span class="icon">
</span>
Food
Nature
People
Travel
Trends
Business
Sport
Music
Gadgets
Uncategorized
</li>
<li class="tags">
<span class="icon">
</span>
Red
Blue
Green
Yellow
</li>
</ul>
</article>
2. The display: inline-flex method
The category li is not wrapped correctly, it breaks in a new line, but in exchange the content is vertically centered like I need.
article {
max-width: 450px;
background: #eee;
font-family: arial;
font-size: 12px;
text-transform: uppercase;
}
article a {
text-decoration: none;
}
.entry-meta {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.entry-meta li {
margin-right: 10px;
background: #ccc;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background: #FA7059;
}
.icon {
display: inline-block;
width: 13px;
height: 13px;
background: #BE4C4E;
}
<article>
<ul class="entry-meta">
<li class="author">
<div class="avatar">
</div>
<span>By </span>
Admin
</li>
<li class="date">
<span>On </span>
<time>Feb 22, 2019</time>
</li>
<li>
<span>On </span>
2 Comments
</li>
<li class="categories">
<span class="icon">
</span>
Food
Nature
People
Travel
Trends
Business
Sport
Music
Gadgets
Uncategorized
</li>
<li class="tags">
<span class="icon">
</span>
Red
Blue
Green
Yellow
</li>
</ul>
</article>
So, in other words, I need somehow to keep the list items to wrap like they are with display: inline but at the same time center vertically the content inside.
P.S. the vertical-align: middle property doesn't really help :)

Answer 1

P.S. the vertical-align: middle property doesn't really help :)
This is actually what you need (applied to .avatar)
article {
max-width: 450px;
background: #eee;
font-family: arial;
font-size: 12px;
text-transform: uppercase;
}
article a {
text-decoration: none;
}
.entry-meta {
list-style: none;
margin: 0;
padding: 0;
}
.entry-meta li {
display: inline;
margin-right: 10px;
background: #ccc;
}
.avatar {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 100%;
background: #FA7059;
vertical-align:middle;
}
.icon {
display: inline-block;
width: 13px;
height: 13px;
background: #BE4C4E;
}
<article>
<ul class="entry-meta">
<li class="author">
<div class="avatar">
</div>
<span>By </span>
Admin
</li>
<li class="date">
<span>On </span>
<time>Feb 22, 2019</time>
</li>
<li>
<span>On </span>
2 Comments
</li>
<li class="categories">
<span class="icon">
</span>
Food
Nature
People
Travel
Trends
Business
Sport
Music
Gadgets
Uncategorized
</li>
<li class="tags">
<span class="icon">
</span>
Red
Blue
Green
Yellow
</li>
</ul>
</article>