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

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'}}>