使用 Margin Auto & Flex 对齐文本

Question

我有三个部分，其中两个部分可能有也可能没有不同大小的图像，具体取决于用户输入。在这两个部分中是我想要对齐的文本，即使图像的高度不同也是如此。我已将部分 display flex 以及文本的父元素和我的文本分配给 margin-top: auto。据我所知，这应该有效。我缺少什么来完成这个？任何指导将不胜感激。

section.wraps-section {
    text-align: center;
    padding: $section-padding-y*5 $section-padding-x $section-padding-y*3;

    header {
        padding-bottom: $base-spacing;
        h2 {
            color: $white;

            mark {
                color: $primary-color;
            }
        }
    }

    .section-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 100px;

        @include lg-up {
            flex-direction: row;
        }

        .block {

            &.content {

                .block-body {
                    display: flex;
                    flex-direction: column;
                }

                p {
                    color: $white;
                    font-family: $tertiary-font-stack;
                    font-size: 30px;
                    margin-top: auto;
                }
            }

            &.svg {
                width: 100px;
                svg {
                    width: 100%;
                }
            }
        }
    }
}

<section class="wraps-section" style="<?= $bg_style ?>">
    <header>
        <h2><?= $section_title ?></h2>
    </header>
    <div class="section-body">
        <div class="block content">
            <div class="block-body">
                <img src="<?= $before_image_url ?>">
                <p><?= $before_title ?></p>
            </div>

        </div>
        <div class="block svg">
            <?php Assets\render_svg('wrap-arrow'); ?>
        </div>
        <div class="block content">
            <div class="block-body">
                <img src="<?= $after_image_url ?>">
                <p><?= $after_title ?></p>
            </div>

        </div>
    </div>
    <div class="section-footer">
        <?php if ($cta_text && $cta_url): ?>
            <a href="<?= $cta_url ?>" class="button"><?= $cta_text ?></a>
        <?php endif; ?>
    </div>
</section>

Answer 1

您快完成了，但是您有两个问题需要解决：

1。 align-items: center

您已将 align-items: center 添加到您的 .section-body。这意味着子项将居中对齐，不会占据 .section-body 的 100% 高度。

2。 .block.content

.block.content 不会占用其父项高度的 100%。要解决这个问题，您只需添加规则 display: flex;

这是一个示例，其中包含您的代码的简化版本并编译了 css：

section.wraps-section {
  text-align: center;
}
section.wraps-section .section-body {
  display: flex;
  gap: 100px;
  flex-direction: row;
}
section.wraps-section .section-body .block.content {
  display: flex;
}
section.wraps-section .section-body .block.content .block-body {
  display: flex;
  flex-direction: column;
}
section.wraps-section .section-body .block.content p {
  margin-top: auto;
}

<section class="wraps-section">
  <div class="section-body">
    <div class="block content">
      <div class="block-body">
        <img src="http://placehold.jp/120x150.png">
        <p>
          Lorem ipsum dolor sit amet
        </p>
      </div>
    </div>
    <div class="block content">
      <div class="block-body">
        <img src="http://placehold.jp/150x150.png">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </div>
</section>

scss未编译：

section.wraps-section {
  text-align: center;
  
  .section-body {
    display: flex;
    // align-items: center will center the items, meaning they won't take the full height of their parent    
    // align-items: center;
    gap: 100px;
    flex-direction: row;

    .block {
      &.content {
        // By adding display: flex, you make .content the full height of it's parent
        display: flex;
        
        .block-body {
          display: flex;
          flex-direction: column;
        }

        p {
          margin-top: auto;
        }
      }
    }
  }
}