Используйте Margin Auto & Flex для выравнивания текста

У меня есть три раздела, два из которых могут иметь или не иметь изображения разного размера в зависимости от ввода пользователя. В этих двух разделах находится текст, который я хочу выровнять, даже если изображения имеют разную высоту. Я назначил секции 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>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы почти у цели, но вам нужно решить две проблемы:

1. align-items: center

Вы добавили align-items: center к своему .section-body. Это означает, что дети будут выровнены по центру и не возьму 100% высоты .section-body.

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

Другие вопросы по теме

Похожие вопросы

Beautifulsoup выбирает элемент на основе innerHTML с помощью Python
Как я могу использовать наведение на один элемент, чтобы изменить фон всей страницы в CSS, Javascript и/или HTML
Как перебрать эту таблицу html и получить данные из строк, последний столбец которых не пуст?
Простая проверка паролей JavaScript не будет зацикливаться после первой итерации
Как удалить правое поле на панели навигации?
При нажатии на изображение должно отображаться соответствующее изображение в другом div с использованием только JavaScript.
TypeError: невозможно прочитать свойства неопределенного (чтение «addEventListener»)
Текст на изображении с эффектом виньетки CSS
Как переопределить глобальный стиль из дочернего компонента и изменить область изменения только для этого компонента в angular
Как исключить из формы, развернутой с помощью скрипта Google Apps, параметр, который достиг своего предела