如何在多条线上对多条线进行居中，每条线都是单独的？

Question

请参阅codepen testcase here。

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

正如您所看到的，我尝试使用flexbox，但这会将多行跨度放在他们自己的行上：

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

如何保留单个段落，但各行上的所有单词都垂直居中？

（至于为什么我需要这个：我想把小图片与文字混合。我案例中的文字实际上总是有相同的大小，但图像（或者更确切地说，动态渲染的内容）的高度可能略有不同。）< / p>

Answer 1

默认使用vertical-align: middle;，它与基线对齐。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;