html - 垂直对齐两个元素和一个带有多行文本的元素

Question

我试图让 2 个元素并排放置。它们需要垂直居中，如果第二项太长，则需要换行。

这是我尝试过的 JS Fiddle: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="/image/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>