Nano Hash - криптовалюты, майнинг, программирование

align-content: центр не работает в Chrome

Я пытаюсь выровнять div по вертикали с помощью flexbox, используя align-content: center. Он отлично работает в Firefox и IE, но не выравнивается по вертикали в Chrome. В Chrome div остается сверху.

<div class="products-wrapper">
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
</div>

И CSS:

.products-wrapper {
    width: 100%;
    min-height: 100vh;
    /* FLEX */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.product {
    max-width: 250px;
    padding: 10px;
}

.product img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    max-width: 250px;
}

Я также пробовал align-items: center;, который центрирует элементы div по вертикали, но это не будет прямая линия с изображениями и текстом, например, если у меня будет разное количество текста.

У кого-нибудь есть решение, как вертикально центрировать div (прямо), которое работает во всех браузерах?

Пример изображения:

Пример изображения

Изменить: если вам не нужна динамическая высота, align-items: center; будет работать с (например) max-height: 400px; в разделе .product. Хотя не совсем то, что я хотел.

vertical-alignment css flexbox text-align
22.04.2018

  • Я вижу, проблема не в том, что элементы product не выравниваются одинаково, а в том, что они получают 100% высоты в Chrome. Пока не уверен, почему. 22.04.2018
  • Кажется, если вы установите высоту в .product, вы решите это? 22.04.2018
  • @A.Meshu Если вы знаете, какой высоты должны быть продукты, конечно. 22.04.2018
  • @A.Meshu Да, это работает, если высота указана в камне. Но должно быть лучшее решение, которое работает динамически. 22.04.2018
  • Поскольку объем текста динамически меняется, я не могу думать ни о чем другом, кроме как установить его (и обработать переполнение и т. д.). 22.04.2018
  • Этот пост может помочь вам понять проблему и предложить решение: Как flex-wrap работает с align-self, align-items и align-content? 23.04.2018

Ответы:


1

Чтобы добиться того, чего вы хотите, вам нужно будет использовать align-items: flex-start, таким образом, все элементы будут выровнены по верхней части своей строки. И чтобы центрировать по вертикали, вы ищете свойство align-items: center, которое выравнивает элементы в контейнере flex вдоль поперечной оси, что в вашем случае вам придется использовать во внешней оболочке, чтобы убедиться, что div products центрирован на странице .

Свойство align-content: center вступает в силу только тогда, когда имеется более одной строки (обернутое содержимое).

Лучшее объяснение разницы между этими двумя свойствами содержится в ответе на этот вопрос о переполнении стека

.outer-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.products-wrapper {
    width: 100%;
    /* FLEX */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: gray;
    align-items: flex-start;
}

.product {
    max-width: 250px;
    padding: 10px;
    background-color: red;
    margin: 5px;
}

.product img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    max-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="outer-wrapper">
<div class="products-wrapper">
      <div class="product">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
</div>
</div>
</body>
</html>

22.04.2018
  • Как я сказал в своем посте, я пробовал это. Он не будет правильно выровнен по горизонтали по прямой линии в зависимости от того, сколько текста находится в ‹p›. 22.04.2018
  • @Nifel, вам нужно использовать дополнительную гибкость оболочки, чтобы добиться того, чего вы хотите, посмотрите на мой отредактированный ответ 22.04.2018

    • 2

    Создайте элемент .product, гибкий контейнер. Это позволяет выровнять содержимое внутри них.

    .product {
    max-width: 250px;
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

    Надеюсь это поможет :)

    .products-wrapper {
    width: 100%;
    min-height: 100vh;
    /* FLEX */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.product {
    max-width: 250px;
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.product img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    max-width: 250px;
}
    <div class="products-wrapper">
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
</div>

    22.04.2018
  • Не работает, например, когда в ‹p› есть разное количество текста. По прямой не пойдет. Так что проблема сохраняется. 22.04.2018
  • не могли бы вы уточнить вопрос 22.04.2018
  • Элементы div будут выравниваться по вертикали, но не по горизонтали. Это будет выглядеть как _--_- вместо ---------- 22.04.2018
  • @Nifel Извините, я не понимаю в чем проблема. Можете ли вы добавить контент, который генерирует therror. 22.04.2018
  • Я добавил ссылку на изображение в описании проблемы. Как видите, попытка вертикального выравнивания во flexbox выглядит не очень хорошо. 22.04.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..