將兩個項目和一個項目與多行文字垂直對齊

Question

我試圖將2個項目彼此相鄰。 它們需要垂直居中，如果太長，第二項需要換行。

這是我嘗試過的JS小提琴： https : //jsfiddle.net/zhu0gq2x/

 #column-content { display: inline-block; border: 1px solid red; } img { vertical-align: middle; } span { display: inline-block; vertical-align: middle; } 

 <div id="column-content"> <img src="http://i.imgur.com/WxW4B.png"> <span><strong>1234</strong> yet another text content that should be centered vertically</span> </div> 

如果屏幕太小，上面的示例將文本放到新行，然后開始換行。 如何確保它保持在同一行？ HTML不是一成不變的，我可以將其更改為我需要的。

Answer 1

嘗試使用flexbox

#column-content {
  display: flex; /*or inline-flex*/
  align-items: center;
}

 #column-content { display: flex; align-items: center; border: 1px solid; } 

 <div id="column-content"> <img src="https://i.stack.imgur.com/cucka.png"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </div> 

Answer 2

CSS Grid可以做到：

 #column-content { display: grid; grid-template-columns: auto 1fr; } #column-content * { align-self: center; border: 1px solid red; } 

 <div id="column-content"> <img src="http://www.placebacon.net/50/50"> <span><strong>1234</strong> yet another text content that should be centered vertically</span> </div> 

Answer 3

<div id="column-content" style="white-space:nowrap;">

如果您使用這個。 它不會創建新行

Answer 4

CodePen URL

 #column-content { display: flex; align-items: center; border: 1px solid red; width: 40em; justify-content: flex-start; height: 100px; } #column-content>* { margin-right: 20px; border: solid 1px green; } 

 <div id="column-content"> <div> <img src="http://i.imgur.com/WxW4B.png"> </div> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </div> </div>