How to center vertical and horizontal #277

muslimmuda15 · 2025-01-10T02:30:31Z

muslimmuda15
Jan 10, 2025

I create a layout

const main = {
    backgroundColor: "#14205E",
    width: "100%",
    height: "768px",
    fontFamily:
        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
    display: "flex",
    justifyContent: "center", // not show in email
    alignItems: "center", // not show in email
    margin: 0
};

const container = {
    backgroundColor: "rgba(10, 153, 135, 0.5)",
    padding: "8px",
    border: "1px solid rgba(101, 230, 214, 0.5)",
    width: "100%",
    maxWidth: "450px"
    // marginTop: "100px"
    // opacity: 0.5
};

const box = {
    padding: "24px"
};

export const EmailLayout = ({
    locale,
    children,
    preview
}: PropsWithChildren<{ preview: ReactNode; locale: string }>) => {
    return (
        <Html lang={locale}>
            <Head />
            <Preview>{preview}</Preview>
            <Body style={main} className="main">
                <Container style={container}>
                    <div style={box}>
                        <Container>
                            <Img
                                src={
                                    "https://myimage.com/assets/public/new-logo.png"
                                }
                                alt="main logo"
                                width="250"
                                height="70"
                            />
                            <Img
                                src={
                                    "https://myimage.com/assets/public/padlock-logo.png"
                                }
                                alt="lock"
                                width="200"
                                height="135"
                            />
                        </Container>
                        {children}
                    </div>
                </Container>
            </Body>
        </Html>
    );
};

I adding justifyContent: "center" and alignItems: "center" in main

After built and try to sending into email, that styles are gone and my layout stick in the top

How to solve this?

shellscape · 2025-01-10T12:41:21Z

shellscape
Jan 10, 2025
Maintainer

Please do not ignore issue templates. Moving this to Q & A

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to center vertical and horizontal #277

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to center vertical and horizontal #277

Uh oh!

muslimmuda15 Jan 10, 2025

Replies: 1 comment

Uh oh!

shellscape Jan 10, 2025 Maintainer

muslimmuda15
Jan 10, 2025

shellscape
Jan 10, 2025
Maintainer