Вертикально выровняйте 2 div (разной ширины) с помощью столбца flexbox

Я пытаюсь выровнять 2 div по вертикали, как показано на рисунке ниже, с помощью гибкого блока: как это должно быть

А вот второй div с описанием картинки всегда слева: как это отображается в настоящее время

Я что-то упустил в отношении выравнивания 2 div с flexbox или есть лучший способ.

Заранее спасибо!

Клузо

<!DOCTYPE html>
<html lang = "en">
    <head>
        <style>
            .thumb {
                width: 300px;
                margin-bottom: 50px;
                display: flex;
                justify-content: center;
                align-items: center; 
                flexbox-direction: column;
                }

                .thumb img {
                max-width: 300px;
                max-height: 300px;
                transition: all 0.5s;
                margin-bottom: 1rem;
                }

                .thumb .museum-label {
                padding: 1em;
                background: white;
                box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.50);
                width: 200px; 
                color:#2E3225;
                }

                .thumb .museum-label .artist{
                font-weight: bold;
                display: block;
                }

                .thumb .museum-label .title{
                font-style: italic;
                }

        </style>
    </head>
    <body>
        <div class = "thumb">
            <a href = "framing.html">
              <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg/800px-Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg" alt = "Venice, from the Porch of Madonna della Salute">
              <div class = "museum-label">
                <span class = "artist">Pieter Bruegel the Elder</span>
                <span class = "title">The Harvesters</span>,
                <span class = "date">1565</span>
              </div>
            </a>
          </div>
    </body>
</html>

html css flexbox

16.03.2022 11:10

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вам нужно поместить div с классом museum-label вне тега привязки (a). Это должно решить проблему с выравниванием.

Полный рабочий фрагмент кода:

 .thumb {
   width: 300px;
   margin-bottom: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }

 .thumb img {
   max-width: 300px;
   max-height: 300px;
   transition: all 0.5s;
   margin-bottom: 1rem;
 }

 .thumb .museum-label {
   padding: 1em;
   background: white;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.50);
   width: 200px;
   color: #2E3225;
 }

 .thumb .museum-label .artist {
   font-weight: bold;
   display: block;
 }

 .thumb .museum-label .title {
   font-style: italic;
 }

<div class = "thumb">
  <a href = "framing.html">
    <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg/800px-Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg" alt = "Venice, from the Porch of Madonna della Salute">

  </a>
      <div class = "museum-label">
      <span class = "artist">Pieter Bruegel the Elder</span>
      <span class = "title">The Harvesters</span>,
      <span class = "date">1565</span>
    </div>
</div>

16.03.2022 11:16

Два способа центрирования элементов в родительском элементе с помощью CSS:

parent {
  display : flex;
  justify-content: center;
  align-items: center;
}

ИЛИ

parent {
  display: grid;
  place-items: center;
}

После добавления этого к родительскому элементу дочерний элемент или дочерние элементы будут правильно центрированы во всех измерениях.

16.03.2022 11:18

вам нужно поставить margin:0 auto; чтобы центрировать его. Попробуйте этот код

.thumb {
                width: 300px;
                margin-bottom: 50px;
                display: flex;
                justify-content: center;
                align-items: center; 
                flex-direction: column;
                margin:0 auto;
                }

                .thumb img {
                max-width: 300px;
                max-height: 300px;
                transition: all 0.5s;
                margin-bottom: 1rem;
                
                }

                .thumb .museum-label {
                padding: 1em;
                background: white;
                box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.50);
                width: 200px; 
                color:#2E3225;
                margin:0 auto;
                }

                .thumb .museum-label .artist{
                font-weight: bold;
                display: block;
                }

                .thumb .museum-label .title{
                font-style: italic;
                }

<!DOCTYPE html>
<html lang = "en">

    <body>
        <div class = "thumb">
            <a href = "framing.html">
              <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg/800px-Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg" alt = "Venice, from the Porch of Madonna della Salute">
              <div class = "museum-label">
                <span class = "artist">Pieter Bruegel the Elder</span>
                <span class = "title">The Harvesters</span>,
                <span class = "date">1565</span>
              </div>
            </a>
          </div>
    </body>
</html>

16.03.2022 11:29

Следуйте селекторам .thumb и .thumb a

<!DOCTYPE html>
<html lang = "en">
    <head>
        <style>
            .thumb{
                display: flex;
                justify-content: center;
             }
            .thumb a{
                width: 300px;
                margin-bottom: 50px;
                display: flex;
                justify-content: center;
                align-items: center; 
                flex-direction: column;
                }

                .thumb img {
                max-width: 300px;
                max-height: 300px;
                transition: all 0.5s;
                margin-bottom: 1rem;
                }

                .thumb .museum-label {
                padding: 1em;
                background: white;
                box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.50);
                width: 200px; 
                color:#2E3225;
                }

                .thumb .museum-label .artist{
                font-weight: bold;
                display: block;
                }

                .thumb .museum-label .title{
                font-style: italic;
                }

        </style>
    </head>
    <body>
        <div class = "thumb">
            <a href = "framing.html">
              <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg/800px-Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg" alt = "Venice, from the Porch of Madonna della Salute">
              <div class = "museum-label">
                <span class = "artist">Pieter Bruegel the Elder</span>
                <span class = "title">The Harvesters</span>,
                <span class = "date">1565</span>
              </div>
            </a>
          </div>
    </body>
</html>

16.03.2022 11:58

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

Установите flex вместо a вместо .thumb.

<!DOCTYPE html>
<html lang = "en">

<head>
  <style>
    .thumb {
      width: 300px;
      margin-bottom: 50px;
    }
    a{
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .thumb img {
      max-width: 300px;
      max-height: 300px;
      transition: all 0.5s;
      margin-bottom: 1rem;
    }
    
    .thumb .museum-label {
      padding: 1em;
      background: white;
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.50);
      width: 200px;
      color: #2E3225;
    }
    
    .thumb .museum-label .artist {
      font-weight: bold;
      display: block;
    }
    
    .thumb .museum-label .title {
      font-style: italic;
    }
  </style>
</head>

<body>
  <div class = "thumb">
    <a href = "framing.html">
      <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg/800px-Pieter_Bruegel_the_Elder-_The_Harvesters_-_Google_Art_Project.jpg" alt = "Venice, from the Porch of Madonna della Salute">
      <div class = "museum-label">
        <span class = "artist">Pieter Bruegel the Elder</span>
        <span class = "title">The Harvesters</span>,
        <span class = "date">1565</span>
      </div>
    </a>
  </div>
</body>

</html>

16.03.2022 12:00

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

React Fluent UI - изменить цвет флажка и метки флажка

SVG с несколькими путями

Двухуровневое меню-гармошка HTML скрывает и не добавляет содержимое

Как установить метку флажка слева?

Как разместить кнопку воспроизведения посередине всех изображений

Изменение цвета текста в зависимости от его фона

Как изменить порядок CSS Flexbox

Angular как заморозить матовый стол

Скрытие элемента с максимальной шириной: 0?

Точно определить, поддерживает ли браузер плавную прокрутку?

Вертикально выровняйте 2 div (разной ширины) с помощью столбца flexbox

Ответы 5

Два способа центрирования элементов в родительском элементе с помощью CSS:

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

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