右の画像を含むスパン（テキスト）

Question

あなたはこれを手伝ってもらえますか？ 私はサイドバーにリの内側にスパンと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; 
 
}

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