Как вертикально укладывать компоненты в div (React. JS)? - PullRequest
Новая
       5

Как вертикально укладывать компоненты в div (React. JS)?

1 голос
/ 01 августа 2020

В настоящее время я пытаюсь набросать внешний вид одностраничного приложения, которое будет отображать случайное изображение профиля и дополнительную информацию о человеке из API (который будет реализован позже). Приложение в основном будет состоять из контейнера, в котором будут храниться все компоненты в поле в центре экрана. В этом контейнере изображение профиля будет помещено непосредственно в центр с дополнительной информацией о пользователе, такой как его имя, непосредственно под изображением с равным интервалом от левого и правого краев контейнера.

Однако, ввиду по моей неопытности у меня возникают трудности как с центрированием изображения профиля, так и с отображением текста под этим изображением с равным интервалом от краев. После прохождения множества похожих вопросов ни один из них, похоже, не решает мою проблему, поэтому любая помощь будет принята с благодарностью!

Код выглядит следующим образом:

App. js 

import React from 'react';
import './App.css';
import ProfileContainer from './components/ProfileContainer/ProfileContainer';

function App() {
  return (
    <div className="App">
      <ProfileContainer/>
    </div>
  );
}

export default App;

Контейнер профиля. js

import React from 'react';
import './ProfileContainer.css'
import ProfilePicture from '../ProfilePicture/ProfilePicture';
import UserSubtitle from '../UserSubtitle/UserSubtitle';

const ProfileContainer = () => {


    return (
        <div className='profile_container'>
                <ProfilePicture/>
                <UserSubtitle/>
        </div>

    )
};

export default ProfileContainer;

Контейнер профиля. css

.profile_container {
    background: grey;
    background-size: 100%;
    
    width: 70%;
    height: 70%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    align-items: center;
    justify-content: center;
  }

ProfilePicture. js

import React from 'react'
import './ProfilePicture.css'

const ProfilePicture = () => {

    return (
        <div className='profile_picture'>
            <img src={require('../../Habee.png')} alt='portrait' />
        </div>
    )
}

export default ProfilePicture;

ProfilePicture. css

.profile_picture {
    width: 100px;
    height: 100px;
    border-radius: 60%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    margin: 0;
    position: absolute;
    
}

.profile_picture img {
    width: 100%;
}

UserSubtitle. js 

import React from 'react';

const UserSubtitle = () => {

    return (
        <div className='user_subtitle'>
            <h2>Information Subtitle</h2>
        </div>
    )
};

export default UserSubtitle;

В настоящий момент у меня есть теги h2 изображения пользователя и субтитров, центрированные по вертикали в их контейнере. Тем не мение. они находятся в одном ряду и совсем не центрированы по горизонтали. Еще раз, если вы решите помочь мне, я искренне признателен за любую предоставленную помощь!

1 Ответ

0 голосов
/ 05 августа 2020

Может быть, это поможет: 

.profile_container {
    background: grey;
    background-size: 100%;
    
    width: 70%;
    height: 70%;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: auto auto auto;  /*Add this*/
    align-items: center;
    justify-content: center;
  }

.profile_picture {
    width: 100px;
    height: 100px;
    border-radius: 60%;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    margin: 0;
    grid-column-start: 1; /*Add this*/
    grid-column-end: 4; /*Add this*/
}

.profile_picture img {
    width: 100%;
}

/*Add all this*/
.user_subtitle {
  grid-column-start: 1;
  grid-column-end: 4;
}

Вы можете поиграть со столбцами сетки, как вам лучше всего.

...