调整手机屏幕大小时不居中对齐

Question

请帮助任何人，

3d 设计图标大小为 219px

当我使用第一个 Div 组件大小 219px 时工作正常，所有列在全屏中连接在一起并且中心也与移动屏幕对齐如果我尝试使用它作为相同的 Div 样式使用 Card 的内容无法正确对齐..... Card 组件是否有任何问题或者我在某处遗漏了什么

 <div style={{ paddingTop: 50, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" }}>
                <Row>
                    <Col style={{ width: 219 }}>  <Example /></Col>
                    <Col style={{ width: 219 }}><Example1 /> </Col>
                    <Col style={{ width: 219 }}><Example1 /></Col>
                    <Col style={{ width: 219 }}><Example1 /></Col>
                    <Col style={{ width: 219 }}><Example1 /></Col>
                </Row>
            </div>

            <div style={{ paddingTop: 10, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" , textAlign:"left"}}>
                <Row>
                    <Col style={{ width: 219 }}> 
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={threedcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#e0741b", color: "white" }}> 3D DESIGN</Card.Header>

                            <Card.Body style={{ backgroundColor: "#fff567" }}>


                                <Card.Text>
                                    We at Hephy, have the finest Designer to make 3d models out of your desired material.
                             </Card.Text>
                                <Threed />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col style={{ width: 219 }}> 
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={eventcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#d15950", color: "white" }}> EVENT </Card.Header>

                            <Card.Body style={{ backgroundColor: "#feece6" }}>

                                <Card.Text>
                                    Right from employee birthday parties to culture events, we like to add that something extra to the Event to make it grand.
                             </Card.Text>
                                <Eventmodal />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col  style={{ width: 219 }}>
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={decocard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#dc6372", color: "white" }}>DECORATION</Card.Header>

                            <Card.Body style={{ backgroundColor: "#fff0f5" }}>

                                <Card.Text>
                                    At hephy, we understand the emotions of parents and their joy when their Children get married.
                             </Card.Text>
                                <Decoration />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col style={{ width: 219 }}> 
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={promoaddcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#31986b", color: "white" }}>PROMO & ADDS</Card.Header>

                            <Card.Body style={{ backgroundColor: "#b7fbf3" }}>


                                <Card.Text>
                                    Rather focusing on specific product or services, we focus on your brand as a whole. It enables to increase your growth in many ways.
                             </Card.Text>
                                <Promomodal />
                            </Card.Body>

                        </Card>
                    </Col>
                    <Col  style={{ width: 219 }}>
                        <Card style={{ width: 219 }}>
                            <Card.Img variant="top" src={festcard} />
                            <Card.Header style={{ textAlign: "center", backgroundColor: "#3d7867", color: "white" }}>FEST</Card.Header>

                            <Card.Body style={{ backgroundColor: "#cff6f2" }}>


                                <Card.Text>
                                    We provide School and College Events. While organizing events, we provide proper arrangements for everything.
                             </Card.Text>
                                <Festmodal />
                            </Card.Body>

                        </Card>
                    </Col>
                </Row>
            </div>

Answer 1

在父 div

中执行 justify-space-around

调整手机屏幕大小时不居中对齐

Align not center when resize for mobile screen

css

reactjs

react-bootstrap

react-css-modules

react-fullstack