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

Posted 2023-02-23

【中文标题】如何在 div (React.JS) 中垂直堆叠组件？

【英文标题】：How to vertically stack components within a 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

【参考方案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;

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