Не удается расположить стилизованные компоненты по центру до go в центре экрана? - PullRequest
Новая
       22

Не удается расположить стилизованные компоненты по центру до go в центре экрана?

0 голосов
/ 05 мая 2020

Я не уверен, связано ли это со структурой компонентов или что, если бы кто-нибудь мог объяснить, что это похоже на мою 2-ю неделю с использованием реакции и во второй раз с использованием стилизованных компонентов.

Извините, если это что-то простое ... Я смотрел на эту ручку кода, которая в основном является тем, чего я пытаюсь достичь .. Codepen

Вот файл:

Дом. js - 

import React from 'react'
import styled from "styled-components";
import Background from './images/Cryptid.png'
import { createGlobalStyle } from 'styled-components'


const Home = () => {

    return (

        <Container>
            <GlobalStyle />
            <InnerContainer>
                <Logo />
                <JoinInfo><p>test</p></JoinInfo>
            </InnerContainer>
        </Container>
    )


}

const GlobalStyle = createGlobalStyle`
  body {
    background: black;
  }`


const OutterContainer = styled.div`
display: flex;
height: 100%;
width: 100%;
`;

const Container = styled.div`
height: 100%;
width: 100%;
`;

const InnerContainer = styled.div`

height: 100%;
width: 100%;
`;

const Logo = styled.div`
justify-content:center;
align-items:center;
border: 1px solid red;
/* margin: auto;
padding: auto; */
height: 100px;
width: 400px;
background-image: url(${ Background});
`

const JoinInfo = styled.section`

  align-items: center;
  justify-content: center;
color: white;
`
export default Home;

Ответы [ 2 ]

1 голос
/ 05 мая 2020

justify-content и align-items - правильные свойства, однако они должны быть помещены в контейнер, и они будут применены к дочерним элементам.

Давайте создадим контейнер, чтобы обернуть lo go внутрь. Мы будем использовать свойства flex и некоторые другие. 

const LogoContainer = styled.div`
display: flex;
justify-content:center; // centers in the flex direction and the default flex-direction is row
align-items:center; // centers perpendicular to the flex direction
height: 100vh; // 100% view height
width: 100vw; // 100% view width
position: absolute; // so it goes behind the current content
`;

Подробнее о css flexbox можно узнать по адресу MDN .

0 голосов
/ 05 мая 2020 
const InnerContainer = styled.div`
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

просто измените свой внутренний контейнер. и вам нужно узнать больше о гибкости.

...