Vertically align 2 divs (different widths) with flexbox column-CodePudding

I am trying to align 2 divs vertically as shown in the picture below with a flex box: how it should be

But the second div with the description of the picture is always towards the left: how it is currently displayed

Am I missing something in regards of aligning 2 divs with a flexbox or is there are better way.

Thanks in advance!

Clouseau

<!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 >
            <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 >
                <span >Pieter Bruegel the Elder</span>
                <span >The Harvesters</span>,
                <span >1565</span>
              </div>
            </a>
          </div>
    </body>
</html>

CodePudding user response：

You need to put the div with class museum-label outside the anchor(a) tag. It should fix the alignment issue.

Full working code snippet:

 .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 >
  <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 >
      <span >Pieter Bruegel the Elder</span>
      <span >The Harvesters</span>,
      <span >1565</span>
    </div>
</div>

CodePudding user response：

Two ways of centering items in a parent using CSS :

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

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

After having added that to the parent, the child element or the children elements will all be properly centered in all dimensions.

CodePudding user response：

you need to put margin:0 auto; to center it. Try this code

.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 >
            <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 >
                <span >Pieter Bruegel the Elder</span>
                <span >The Harvesters</span>,
                <span >1565</span>
              </div>
            </a>
          </div>
    </body>
</html>

CodePudding user response：

Follow the selectors .thumb and .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 >
            <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 >
                <span >Pieter Bruegel the Elder</span>
                <span >The Harvesters</span>,
                <span >1565</span>
              </div>
            </a>
          </div>
    </body>
</html>

CodePudding user response：

Set flex for a instead .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 >
    <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 >
        <span >Pieter Bruegel the Elder</span>
        <span >The Harvesters</span>,
        <span >1565</span>
      </div>
    </a>
  </div>
</body>

</html>