複数のスパンをそれぞれのラインごとに複数のラインに集中させるにはどうすればよいですか？

Question

codepen testcase hereを参照してください。

私は異なるサイズの複数のスパン（または他のインライン要素）を持っています（ペン内では、ランダムなサイズのスパンをカンマで区切ってランダムに切り詰めています。 ）、それらはすべてテキストのベースラインに揃えられます。私はそれらを1つの段落にとどまらず、各行の中央に揃えたいと考えています。

あなたが見ることができるように、私は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>