Блог

Я составляю следующее, используя 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>
 

Вы можете поместить 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>