Блог

Главная - Вопросы по программированию - Как исправить выравнивание в гибком поле с изображениями и текстом

Как исправить выравнивание в гибком поле с изображениями и текстом

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть гибкий блок, в котором есть несколько продуктов, продукты состоят из изображения и некоторого текста. Проблема в том, что любой из продуктов, содержащих более одной строки текста, имеет проблему, из-за которой изображение немного приподнято над остальными.

Есть идеи, как это исправить?

Мой код приведен ниже

     <div class='imggrid'>
        <div class='product'>
            <img src="assets/images/merch/01.png" alt="The Joiners Tee">
            <h3>Product Title</h3>
        </div>
            <div class='product'>
            <img src="assets/images/merch/01.png" alt="The Joiners Tee">
            <h3>Product Title with More Words</h3>
        </div>
        <div class='product'>
            <img src="assets/images/merch/01.png" alt="The Joiners Tee">
            <h3>The Joiners Tee</h3>
        </div>
        <div class='product'>
            <img src="assets/images/merch/01.png" alt="The Joiners Tee">
            <h3>The Joiners Tee</h3>
        </div>
        <div class='product'>
            <img src="assets/images/merch/01.png" alt="The Joiners Tee">
            <h3>The Joiners Tee</h3>
        </div>
        <div class='product'>
            <img src="assets/images/merch/01.png" alt="The Joiners Tee">
            <h3>The Joiners Tee</h3>
        </div>

    </div>

css

 .imggrid {
  width: 80vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
}
.imggrid img {
  margin-bottom: 1.5rem;
}

Комментарии:

1. Вы определенно хотели отображать продукты в столбцах, а не в строках?

2. Прошу прощения, они находятся в столбцах на мобильном устройстве, но строки в медиа-запросе позже. Они расположены правильно, просто, когда текст ниже содержит более одной строки, изображения слегка сдвигаются вверх

Ответ №1:

Используете ли вы следующую строку в своем css:

 * {
  padding: 0;
  margin: 0;
}

Это поможет очистить некоторые отступы по умолчанию