如何在 div (React.JS) 中垂直堆叠组件？答案

【问题标题】：How to vertically stack components within a div (React.JS)?如何在 div (React.JS) 中垂直堆叠组件？
【发布时间】：2020-11-21 20:54:08
【问题描述】：

我目前正在尝试勾勒出单页应用程序的外观，该应用程序将显示随机的个人资料图片和来自 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;

ProfileContainer.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;

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 标签在其容器中垂直居中。然而。它们在同一行，根本不在水平居中。再次，如果您选择帮助我，我真的很感谢您提供的任何和所有帮助！

【问题讨论】：

从.profile_picture 中删除position: absolute 并更改margin: 0 margin: auto

标签： javascript html css reactjs components

【解决方案1】：

也许这会有所帮助：

.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;
}

您可以根据自己的喜好使用网格列。

【讨论】：