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

Question

我想做一个这样的页面。为此，我想将蓝色部分居中，但我的代码无法正常工作。怎么了？如有任何建议，我们将不胜感激。

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>
    );
}

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

Answer 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 framwork 上的网格一样。

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

Playground

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

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

Question related to how to center align via flex attribute

reactjs

styled-components