#reactjs #semantic-ui #semantic-ui-react
#reactjs #семантический пользовательский интерфейс #semantic-ui-react
Вопрос:
Я составляю следующее, используя 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>
Ответ №1:
Вы можете поместить 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>