html - 如何分别针对每条线将多个跨度集中在多条线上？

Question

参见 codepen testcase here .

我有多个不同大小的跨度(或其他内联元素)(在笔中，我将一个长的随机段落分成由逗号分隔的随机大小的跨度(,)，就这样快速生成测试用例)，它们都与文本基线对齐。我希望它们留在一个段落中，但也与每行的中心对齐。

如您所见，我尝试使用 flexbox ，但这会将多行跨度放在自己的行上:

{
  'display': 'flex',
  'flex-wrap': 'wrap',
  'justify-content': 'flex-start',
  'align-items': 'center'
}

如何让单个段落保持垂直居中？

(至于为什么我需要这个:我想将小图像与文本混合。在我的例子中，文本实际上总是具有相同的大小，但图像(或者更确切地说，动态呈现的内容)的高度可能略有不同。)

Answer 1

考虑使用 vertical-align: middle;默认情况下它与基线对齐。

const text = "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecatcupi, datatnonproidentsuntinculpaquiofficiadeseruntmollit animidestlaborum.";

// chop up text into random pieces 
// of random size
words = text.split(',').map(w => {
  const $el = $('<span>' + w + ' </span>');
  return $el.css({
    'font-size': Math.random()*3 + 1 + 'em',
    'vertical-align': 'middle'
  });
});

$body = $(document.body);
$body.append(words);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>