Question

请帮助任何人，

3d设计图标大小为219px

当我使用第一个Div组件时，尺寸为219px的像素就可以正常工作，并且所有Col都以全屏方式连接在一起，并且还与移动屏幕中心对齐如果我尝试使用Card的内容将其用作与Div样式相同的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>

Answer 1

在父div中执行justify-space-around

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

1 个答案: