Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

Div design wont center [duplicate]

$
0
0

I try to center this code, but I can't find what in the code makes it placed on the left instead of centered.

I have changed the flex-direction to column instead of row as I had originally. Which did not give the desired result.

<div style="margin-top:3rem; margin-bottom:3rem;"><div style="display: flex; flex-wrap: wrap; flex-direction: column; gap:0; justify-content: center; align-items: middle; margin:0 auto; width:100%;"><div style="overflow: hidden; height: 30px; min-width: 369px; background-color: black; width:44%;"><p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:0.25rem;"><a href="#saljarinfo">Se säljarinfo</a></p></div><div style="overflow: hidden; height: 580px; min-width: 369px; background-color: white; width:44%;"><?php if ($isHex): ?><iframe id="frame" scrolling="yes" src="https://web.sendify.se/tracking/<?= isset($_GET['t']) ? htmlspecialchars($_GET['t']) : '' ?>" style="border: 0px none; height: 680px; margin-top: -100px; width:100%;"></iframe><?php else: ?><div style="display: flex; justify-content: center; align-items: center; height:100%; width:100%;"><h2 style=" font-family: 'Neue Montreal Medium' , sans-serif; font-size:36px; text-align:center; padding:4rem;"><?= $felmeddelande ?? "Inget femeddelande har angivits." ?></h2></div><?php endif; ?></div><div style="width: 44%; min-width:369px; background-color:black; height: 580px; padding: 8px 0px; text-align:center;"><h2 style="color:white; font-size:28px; font-family: 'Neue Montreal Medium', sans-serif; font-weight:500; margin:0; margin-top:10px; margin-bottom:0.5rem;"><a name="saljarinfo"></a>SÄLJARINFO</h2><img src="<?= $bild ?? "" ?>" alt="Bild på säljaren!" style="width:180px; display:block; margin: 0 auto; border-radius:5px;"><h3 style="color:white; font-size:22px; margin:0; margin-top:0.5rem; font-family: 'Neue Montreal Book', sans-serif;"><?= $saljarNamn ?? "" ?></h3><p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Thin', sans-serif; letter-spacing:4px; font-size:16px;"><?= $roll ?? "" ?></p><div style='height:1px; background-color:white; margin-top: 1.5rem; margin-bottom: 1.5rem; '></div><p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:0.25rem;">Tack för din order!</p><p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:1.25rem;">Jag är med Er hela vägen - Från idé till färdigt projekt!</p><p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:0.75rem;">Behöver du komma i kontakt med mig?</p><div style="display: flex; flex-direction: row; justify-content: center; align-items: middle; flex-wrap: wrap; gap:1.5rem;"><a class="customClassHoverOverA" href="tel:<?= $telefon ?? "" ?>" title="Ring mig på<?= $telefon ?? "" ?>!"><i style="color:white; font-size:1.5rem;" class='fas fa-phone-alt'></i></a><a class="customClassHoverOverA" href="mailto:<?= $epost ?? "" ?>" title="Skicka e-post till mig på<?= $epost ?? "" ?>!"><i style="color:white; font-size:1.5rem;" class='fas fa-mail-bulk'></i></a><a class="customClassHoverOverA" href="<?= $id_kort ?? "" ?>" title="Mitt visitkort på<?= $id_kort ?? "" ?>!"><i style="color:white; font-size:1.5rem;" class='fas fa-id-card'></i></a></div></div></div>

Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>