[英]Why aren't my <a> elements centered within my <li> navigation elements?
[英]Why aren't my elements centered in my flex container?
我正在为我刚刚注册的网络开发公司构建网站(这也是我的工作申请组合的一部分),在我的投资组合页面上,我正在添加一个我已经完成的网站的视觉列表客户,我正在使用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;
确保这些都没有影响它,但它没有产生任何影响。
实际上元素在 flex 容器中居中,但是PortfoloioContainer
的宽度比屏幕宽。
将max-width:100%
添加到您的PortfoloioContainer
。 这将解决问题。
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.