带有右侧图像的跨度（长文本）

Question

你可以帮我这个吗？ 我在侧边栏中的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>

我想要的是什么：

非常感谢任何帮助：）

Answer 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; }垂直对齐父级。

＆＃13;

＆＃13;

<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>

＆＃13;

android...Toolbar

＆＃13;

＆＃13;

＆＃13;