有关如何通过 flex 属性居中对齐的问题

Posted 2023-03-15

【中文标题】有关如何通过 flex 属性居中对齐的问题

【英文标题】：Question related to how to center align via flex attribute

【发布时间】：2022-01-08 19:06:57

【问题描述】：

我想制作一个像这张图片一样的页面。为此，我想以蓝色绘制的部分居中，但我的代码无法正常工作。怎么了？任何建议将不胜感激。

import 
    Col, Row,
 from 'react-bootstrap';


const content=css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

const imageContianer=css`
width: 100%;
height: 60%;
`;

const About =()=>
    return (
        <div css=content>
            <p>Who am I ?</p>
            <div css=imageContianer>
                <Row>
                    <Col>
                        <img
                            src= Icon 
                            width='200'
                            height='180'
                            alt='Icon' />
                    </Col>
                    <Col>
                        <p>First</p>
                        <p>Second</p>
                        <p>Third</p>
                    </Col>
                </Row>
            </div>
        </div>
    );

这就是结果。 “我是谁”部分甚至出现在上面的容器中。有什么问题？

【问题讨论】：

你想把“我是谁”移到容器的中心？

完全正确。我想附上图片和内容

我已经为它写了一个答案，希望它会有所帮助:)

【参考方案1】：

import 
    Col, Row,
 from 'react-bootstrap';


const content=css`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

const imageContianer=css`
width: 100%;
height: 60%;
display: flex;
align-items: center;
justify-content: center;
`;

const rowContainer=css`
flex: 0 0 60% !important;
align-items: center;
justify-content: center;
`;

const About =()=>
    return (
        <div css=content>
            <p>Who am I ?</p>
            <div css=imageContianer>
                <Row css=rowContainer>
                    <Col>
                        <img
                            src= Icon 
                            width='200'
                            height='180'
                            alt='Icon' />
                    </Col>
                    <Col>
                        <p>First</p>
                        <p>Second</p>
                        <p>Third</p>
                    </Col>
                </Row>
            </div>
        </div>
    );

希望上面的代码可以解决您的问题。基本上你需要知道 flex 是如何工作的，就像 bootstrap css 框架上的 grid 一样。

注意：我没有像您使用 css 那样使用样式组件，但我只是按照您的代码示例进行操作。

Playground

如果我的回答没有达到预期的效果，请发表评论

【讨论】：

感谢您的宝贵时间。但它就像上图一样工作?

您确定css 会影响组件吗？我只是尝试使用 vanila css 进行样式设置，而不是使用 styled-component

@sojinLee codesandbox.io/s/react-bootstrap-playground-forked-7zduv?file=/… 你可以在这个代码框里看到

非常感谢??????

@sojinLee 不客气，别忘了标记为正确答案：D