语义 UI React：在中间对齐 2 列，在顶部对齐 1 列

Question

我正在使用语义 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>

Answer 1

您可以在每个 Grid.Column 上放置 verticalAlign 属性，并从 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>

语义 UI React：在中间对齐 2 列，在顶部对齐 1 列

Semantic UI React: Align 2 columns in middle and 1 to the top

reactjs

semantic-ui

semantic-ui-react