[英]How can I keep my icon centered while using flex-box? I have a case where I have 2 icons in 1 page and 3 icons in another for a react project
I want to keep the second div fixed at the center but when I have 2 divs the last div is moving to the left.我想将第二个 div 固定在中心,但是当我有 2 个 div 时,最后一个 div 会向左移动。 I am using justify-content: space-between for the divs.我正在为 div 使用 justify-content: space-between。 I understand it will push the last div to the left when I have 2 divs instead of 3, how can I keep the second div in the same position (close to the center) at all times?我知道当我有 2 个 div 而不是 3 个 div 时,它会将最后一个 div 向左推,如何始终将第二个 div 保持在同一个 position (靠近中心)中?
<div className={classes.container}>
{!!ls?.fields?.difficulty && ( //div 1
<LabeledIcon
cardType="lsCard"
icon={ls.fields.difficulty}
difficultyLevel={ls.fields.difficulty}>
{l.fields.difficulty}
</LabeledIcon>
)}
{!!ls?.fields?.time && ( //div2
<LabeledIcon
cardType="lsCard"
icon="schedule"
messageId="lsDuration"
messageValues={ls.fields}
/>
)}
{!!ls.comment_count && ( //div3
<LabeledIcon
cardType="lsCard"
icon="chat"
messageId="lsComments"
messageValues={ls}
/>
)}
</div>
</div>
Try Css Gird container: { display: 'grid', grid: 'auto / 1fr 1fr', justifyContent: 'center', gridAutoFlow: 'column' }
Else you will have to wrap the icon inside a div.试试 Css container: { display: 'grid', grid: 'auto / 1fr 1fr', justifyContent: 'center', gridAutoFlow: 'column' }
否则你将不得不将图标包装在一个 div 中。 align them to flex-start and center the icon inside them将它们对齐到 flex-start 并在其中居中图标
https://jsfiddle.net/2vwjpsab/ https://jsfiddle.net/2vwjpsab/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.