跨度（长文本）与右侧的图像答案

【问题标题】：Span (long text) with image to the right跨度（长文本）与右侧的图像
【发布时间】：2017-07-11 00:31:47
【问题描述】：

你能帮我解决这个问题吗？我在侧边栏中的 li 内有一个 span 和一个 img。我想要的是跨度始终使 img 向右，并且 img 垂直居中，无论跨度内的文本有多长（我不知道它可以有多长或多短）。

现在我有这个：

HTML：

<li class="sidebar-menu-item">
     <p class="sidebar-menu-button" ><img src="img/logout.png"/>Text that could be very long</p>
</li>

我想要什么：

任何帮助将不胜感激:)

【问题讨论】：

标签： html css

【解决方案1】：

在父级上使用flex，并在其子级上使用align-items: center 垂直对齐。

li {
  list-style: none;
}

li p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

<li class="sidebar-menu-item">
     <p class="sidebar-menu-button">Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br>Text that could be very long<br><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"/></p>
</li>

【讨论】：

@Michael 你为此投了反对票吗？ IE 绝对有用。随意发表评论，但在滥用 Stack Overflow 上的否决按钮之前，我会三思而后行。
@Michael 你是说你没有对我投反对票吗？在您发表评论的同时，我得到了反对票。你在跟我开玩笑吗：“它怎么会有用”？你会去对 Stack Overflow 上的每个 flexbox 解决方案投反对票吗？它显然对 OP 有用，这就是在他们的帖子中提供解决方案的重点。此外，根据浏览器统计数据，97.48% 支持 flexbox - caniuse.com/#feat=flexbox
@Michael 你太迂腐了。如果 OP 需要为其添加前缀，他们可以。我可以将其添加到我的答案中吗？当然。我做到了。但这不是争论的理由。 “另外，我不会搜索，因为我有更好的事情要做，但我确信有超过 15% 的 IE 如果您不打算备份你的要求，完全放弃它，否则它毫无意义。