内联父级中垂直居中的内容

Question

试图为明信片创建自适应的帖子元。

想法是，有时后meta可能在内部包含多个类别，因此我需要某种方式包装项目，但同时要使li内容（例如头像和图标）垂直居中。

我试图将display: inline-flex应用于.entry-meta，以便能够使用align-items: center属性，但是在这种情况下，列表项-li不再像应用display: inline时那样包装精美到li。

---

1。 display: inline方法（不使项目垂直居中）

此方法正确包装，并且我希望所有列表项都存在，但不能使内容垂直居中（如头像和图标）

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&nbsp;</span>

			<a href="#">Admin</a>
		</li>

		<li class="date">
			<span>On&nbsp;</span>
			<time>Feb 22, 2019</time>
		</li>

		<li>
			<span>On&nbsp;</span>
			<a href="#">2 Comments</a>
		</li>

		<li class="categories">
			<span class="icon">
			</span>

			<a href="#">Food</a>
			<a href="#">Nature</a>
			<a href="#">People</a>
			<a href="#">Travel</a>
			<a href="#">Trends</a>
			<a href="">Business</a>
			<a href="">Sport</a>
			<a href="">Music</a>
			<a href="">Gadgets</a>
			<a href="#">Uncategorized</a>
		</li>

		<li class="tags">
      <span class="icon">
			</span>
      
			<a href="">Red</a>
			<a href="">Blue</a>
			<a href="">Green</a>
			<a href="">Yellow</a>
		</li>

	</ul>
</article>

2。 display: inline-flex方法

类别li未正确包装，它换行了，但是作为交换，内容按我的需要垂直居中。

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&nbsp;</span>

			<a href="#">Admin</a>
		</li>

		<li class="date">
			<span>On&nbsp;</span>
			<time>Feb 22, 2019</time>
		</li>

		<li>
			<span>On&nbsp;</span>
			<a href="#">2 Comments</a>
		</li>

		<li class="categories">
			<span class="icon">
			</span>

			<a href="#">Food</a>
			<a href="#">Nature</a>
			<a href="#">People</a>
			<a href="#">Travel</a>
			<a href="#">Trends</a>
			<a href="">Business</a>
			<a href="">Sport</a>
			<a href="">Music</a>
			<a href="">Gadgets</a>
			<a href="#">Uncategorized</a>
		</li>

		<li class="tags">
      <span class="icon">
			</span>
      
			<a href="">Red</a>
			<a href="">Blue</a>
			<a href="">Green</a>
			<a href="">Yellow</a>
		</li>

	</ul>
</article>

因此，换句话说，我需要以某种方式使列表项像display: inline一样进行包装，但同时将其中的内容垂直居中。

P.S。 vertical-align: middle属性并没有真正的帮助：）

Answer 1

P.S。 vertical-align：middle属性实际上并没有帮助：）

这实际上是您需要的（应用于.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&nbsp;</span>

			<a href="#">Admin</a>
		</li>

		<li class="date">
			<span>On&nbsp;</span>
			<time>Feb 22, 2019</time>
		</li>

		<li>
			<span>On&nbsp;</span>
			<a href="#">2 Comments</a>
		</li>

		<li class="categories">
			<span class="icon">
			</span>

			<a href="#">Food</a>
			<a href="#">Nature</a>
			<a href="#">People</a>
			<a href="#">Travel</a>
			<a href="#">Trends</a>
			<a href="">Business</a>
			<a href="">Sport</a>
			<a href="">Music</a>
			<a href="">Gadgets</a>
			<a href="#">Uncategorized</a>
		</li>

		<li class="tags">
      <span class="icon">
			</span>
      
			<a href="">Red</a>
			<a href="">Blue</a>
			<a href="">Green</a>
			<a href="">Yellow</a>
		</li>

	</ul>
</article>