css - 在顶部对齐图标而不偏移高度

Question

我正在尝试将顶部的相机图标直接对齐在 it's as easy as 标题的正下方。但是，当我增加标题下方的文本量时，它会下推其他组件。

<h2>Its As Easy As ...</h2>
<div style={{margin: '10px 0', display: 'inline-block'}}> //wrapper for all 3 

    // Icon with title component
    <div style={{display: 'inline-block', margin: '20px 10px', width: '200px'}}>
      <div style={{margin: '0 0 10px'}}>
        <FontAwesome name="camera" size="4x"/>
      </div>
      <div>
        <h3 style={{margin: '10px 0'}}>{title}</h3>
        <div>{desc}</div>
      </div>
    </div>
    ...repeat 2 more for the others
</div>

我在 desc 属性中传递了一些文本，当该文本很长时，它会将其他组件向下推。

我尝试设置固定高度，但这只会增加组件的整体高度。

如何对齐图标，使 desc 字段中的长文本不影响其他组件的高度？

Answer 1

您可以尝试让您的顶级 div 具有以下...

<div style={{margin: '10px 0', display: 'flex', alignItems: 'start', justifyContent: 'center'}}>