為什么我的元素不在我的 flex 容器中居中？

Question

我正在為我剛剛注冊的網絡開發公司構建網站（這也是我的工作申請組合的一部分），在我的投資組合頁面上，我正在添加一個我已經完成的網站的視覺列表客戶，我正在使用display: flex; 和align-items: center; 對於包裝器，但它們似乎沒有完全對齊，左側的間隙大於右側的間隙，並且在移動視圖中更加突出：

這是我在標題下方使用的styled-components ：

import React from 'react';
import styled, { keyframes } from 'styled-components';
import { Link } from 'react-router-dom';
import { fadeInUp } from 'react-animations';

export const PortfolioContainer = styled.div`
    min-height: 100vh;
    width: 100vw;
    padding-top: 110px;
`

export const PortfolioHeader = styled.h1`
    display: flex;
    justify-content: center;
    color:  ${props => props.txtColor};
`

export const PortfolioWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: transparent;
    padding-top: 15px;
`

export const PortfolioLinkWrap = styled.div`
    width: 90%;
    height: 80px;
    background: ${props => props.background};
    border-radius: 15px;
    animation: ${props => `${props.num/2}s`} ${keyframes `${fadeInUp}`};
    margin-bottom: 10px;
`

export const PortfolioLinkImg = styled.img`
    height: 80px;
    border-radius: 15px;
`

export const PortfolioLink = styled(Link)`
    color: ${props => props.txtcolor};
    width: 100%;
    height: 80px;
    text-align: center;
    text-decoration: none;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    border-radius: 15px;

    &:hover {
        color: ${props => props.txthovercolor};
        background: ${props => props.hoverbackground};
        transition: 0.3s ease-in-out;
    }
`

這是React組件：

import React from 'react'
import content from './content.js'
import {
    PortfolioContainer,
    PortfolioLinkWrap,
    PortfolioHeader,
    PortfolioWrapper,
    PortfolioLink,
    PortfolioLinkImg,
} from "./PortfolioElements";

const Portfolio = ({
    highlightTxtColor,
    elementBg,
    elementBg2,
    siteText
}) => {
  return (
    <PortfolioContainer>
        <PortfolioHeader txtColor={highlightTxtColor}>
            Portfolio
        </PortfolioHeader>
        <PortfolioWrapper>
            {content.map((e,i) => (
                <PortfolioLinkWrap 
                    key={e.id} 
                    background={elementBg2}
                    num={i+1}
                >
                    <PortfolioLink 
                        to={e.link}
                        target='_blank'
                        txtcolor={siteText}
                        txthovercolor={highlightTxtColor}
                        hoverbackground={elementBg}
                    >
                    <PortfolioLinkImg
                        src={e.img}
                    />
                        {e.text}
                    </PortfolioLink>
                </PortfolioLinkWrap>
            ))}
        </PortfolioWrapper>
    </PortfolioContainer>
  )
}

export default Portfolio

更新：我發現這是因為PortfolioContainer元素比屏幕寬。 但是它設置為width: 100vw; 所以我不確定為什么會這樣。 我嘗試設置標題和PortfolioWrap元素都display: none; 確保這些都沒有影響它，但它沒有產生任何影響。

Answer 1

實際上元素在 flex 容器中居中，但是PortfoloioContainer的寬度比屏幕寬。

將max-width:100%添加到您的PortfoloioContainer 。 這將解決問題。

希望能幫助到你！