Div 设计不会居中

Question

我尝试将此代码居中，但我找不到代码中的内容使其放置在左侧而不是居中。

我已将

flex-direction

更改为

column

，而不是原来的

row

。这没有给出想要的结果。

<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>

Answer 1

我添加了另一个父级

div

并在

CSS

中进行了一些调整。

检查这是否适合您。

#parent {
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="parent">
<div style="margin-top:3rem; margin-bottom:3rem;">
    <div style="display: table-caption; 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>
  </div>