调整移动屏幕大小时不居中对齐

Posted 2023-02-19

【中文标题】调整移动屏幕大小时不居中对齐

【英文标题】：Align not center when resize for mobile screen

【发布时间】：2020-07-18 07:04:23

【问题描述】：

请帮助任何人，

3d 设计图标大小为 219px

当我使用第一个 Div 组件大小 219px 时工作正常，所有列都以全屏方式连接在一起，并且中心也与移动屏幕对齐 如果我尝试将其用作使用 Card 内容的相同 Div 样式，则无法正确对齐..... 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>

【参考方案1】：

在父 div 中执行 justify-space-around