Semantic UI React：将 2 列居中对齐，将 1 列居中对齐答案

【问题标题】：Semantic UI React: Align 2 columns in middle and 1 to the topSemantic UI React：将 2 列居中对齐，将 1 列居中对齐
【发布时间】：2021-01-02 16:01:46
【问题描述】：

我正在使用 Semantic UI React 编写以下内容：第 1 列：文本，第 2 列和第 3 列：图像。虽然图像彼此中间对齐，但它们旁边的文本与顶部对齐。

这里是代码。我必须把 marginTop: "-15em" 来移动标题。有没有更好的方法来做到这一点？

import React from "react";
import {Grid,Header} from "semantic-ui-react";

<Grid>
  <Grid.Row verticalAlign="middle">
    <Grid.Column width={4}>
      <Header as="h4" style={{ marginTop: "-15em" }}>
         Title
      </Header>
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Suspendisse finibus hendrerit nulla, quis mattis felis eleifend 
       sed. Vivamus a blandit tellus. Donec non erat enim. Nullam 
       vulputate lectus a finibus tempor. Fusce vel purus est. Praesent 
       ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
       In maximus enim sem, id dignissim odio volutpat vitae.
       </p>
     </Grid.Column>

     <Grid.Column width={6}>
       <img src={img1} alt="img1" />
      </Grid.Column>
          
     <Grid.Column width={6}>
       <img src={img2} alt="img2" />
     </Grid.Column>
  </Grid.Row>
</Grid>

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

您可以将verticalAlign 属性放在每个 Grid.Column 上，并从 Grid.Row 中删除此属性。希望它应该工作

import React from "react";
import {Grid,Header} from "semantic-ui-react";

<Grid>
  <Grid.Row>
    <Grid.Column width={4}>
      <Header as="h4">
         Title
      </Header>
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Suspendisse finibus hendrerit nulla, quis mattis felis eleifend 
       sed. Vivamus a blandit tellus. Donec non erat enim. Nullam 
       vulputate lectus a finibus tempor. Fusce vel purus est. Praesent 
       ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
       In maximus enim sem, id dignissim odio volutpat vitae.
      </p>
     </Grid.Column>

     <Grid.Column verticalAlign="middle" width={6}>
       <img src={img1} alt="img1" />
     </Grid.Column>
    
     <Grid.Column verticalAlign="middle" width={6}>
       <img src={img2} alt="img2" />
     </Grid.Column>
  </Grid.Row>
</Grid>

【讨论】：