У меня есть Semantic UI React Grid container, который содержит два столбца:
export default function HomePage() {
return (
<>
<Grid container doubling divided stackable columns = {2}>
<Grid.Column width = {5} style = {{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<Container>
<Header as='h1' color = "black" style = {{ fontSize: '360%' }}>
Welcome!
</Header>
<Header as='h2'>
Welcome new message!
<Header.Content>
<Header.Subheader>Small welcome message!</Header.Subheader>
</Header.Content>
</Header>
</Container>
</Grid.Column>
<Grid.Column width = {11} style = {{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<Image src='/images/savannah.png' />
</Grid.Column>
</Grid>
</>
)
}
В результате:
Есть ли способ центрировать элементы внутри Grid container как по горизонтали, так и по вертикали, как показано ниже:
Использование style = {{ display: "flex", alignItems: "center", justifyContent: "center" }} на Grid container не имеет никакого эффекта.
🤔 А знаете ли вы, что...
CSS поддерживает медиа-запросы, что позволяет разрабатывать стили для разных устройств и разрешений экранов.
Существует много возможных подходов, возможно, базовое решение состоит в том, чтобы попытаться обернуть текущий компонент в контейнер с помощью пользовательского класса (или встроенных стилей) для макета.
Таким образом, поведение контейнера сетки семантического пользовательского интерфейса сохраняется, и можно указать пользовательский макет.
Живая демонстрация свернутого примера: stackblitz
Пример:
.custom-layout {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
export default function HomePage() {
return (
<main className = "custom-layout">
<Grid container doubling divided stackable columns = {2}>
<Grid.Column
width = {5}
style = {{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Container>
<Header as = "h1" color = "black" style = {{ fontSize: '360%' }}>
Welcome!
</Header>
<Header as = "h2">
Welcome new message!
<Header.Content>
<Header.Subheader>Small welcome message!</Header.Subheader>
</Header.Content>
</Header>
</Container>
</Grid.Column>
<Grid.Column
width = {11}
style = {{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image src='/images/savannah.png' />
</Grid.Column>
</Grid>
</main>
);
}