Align two divs vertically with flexbox in a column layout, even if they have different widths

I've been attempting to vertically align 2 divs using a flexbox, similar to the layout shown here: desired alignment

However, I'm encountering an issue where the second div containing the picture description is always positioned to the left: current display setup

Am I overlooking something in terms of aligning these 2 divs with flexbox, or is there a better approach?

Thank you for your assistance!

Sherlock 

<!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>

htmlcssflexbox

Answer №1

Apply the flex property to element a instead of using .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>

Answer №2

To resolve the alignment issue, move the div with the class museum-label outside of the anchor(a) tag.

Here is the complete 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 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>

Answer №3

How to perfectly center items within a parent using CSS :

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

OR

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

By applying this code to the parent element, all child elements will be centered flawlessly in both horizontal and vertical directions.

Answer №4

To center it, make sure to include margin:0 auto; in your code snippet:

.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>

Answer №5

Ensure you are following 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 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving perfect alignment for flex items when wrapping in Bootstrap

I'm currently working with Bootstrap 4 and have the following code. On the page, there is a right item positioned on the right side, while several items are located on the left side: ------------------------------------------------------------------- ...

twitter-bootstrapcssflexboxbootstrap-4

What is the best way to include overflow-hidden in the image displayed by the tailblock component?

I have implemented the following Tailblock component, which is built on tailwind.css. My goal is to achieve a hover effect where the image scales up within its original dimensions. I want the image to zoom in without changing its height and width. I atte ...

htmlcsstailwind-csstailwind-ui

Display a carousel image in the center with previous and next sliders for easy navigation

Currently, I am referencing this tutorial My goal is to make the image smaller and centered on the page I have made adjustments to the CSS to decrease the size: min-height: 350px; max-width: 900px; However, the image is still aligned to the left and th ...

htmlcss

incorrect indexing in ordered list

I am facing an issue with the ngIf directive in Angular. My objective is to create a notification system that alerts users about any missing fields. Here's a stackblitz example showcasing the problem: https://stackblitz.com/edit/angular-behnqj To re ...

htmlangulartypescript

Replace the current picture with a newly uploaded one and keep it consistent

On my webpage, there is an image that I want to be able to replace by clicking on it and selecting a new image from the file uploader without showing the upload button. Once the new image is uploaded, I'd like it to replace the current image, and for ...

javascripthtmljquery

Creating an interactive website by utilizing fundamental HTML/CSS along with PHP or WordPress

I need to create a customized website for my project, which should include an admin dashboard for the site owner to modify specific visual components as needed. My main concern is whether I should rely solely on core PHP, HTML, and CSS for this task. Ca ...

phphtmlwordpressweb

Focus on selecting a div nested within a separate component

I have encountered an issue with an imported component that has multiple nested divs which I am unable to modify. Deep within these divs, I need to apply a bottom margin. While using Chrome DevTools, I managed to add the desired margin to one of the div ...

htmlcssreactjs

Error in designing the ReactJS navbar (utilizing internal Bootstrap CSS)

I am facing an issue with the navigation bar in my project. When I use a link to an external source for the navigation bar, it works fine. However, when the internet connection is slow, I notice a brief loading time for the navigation bar which is quite bo ...

cssreactjsnavbar

Ensuring Search Engine Visibility on Splash Pages in Website Design

Any knowledgeable individual familiar with Googlebot's operational mechanism would agree that splash pages have the potential to negatively impact a website's SEO efficacy. Despite this, I am currently faced with the challenging task of incorpor ...

javascripthtmlseo

How can we create lists using parentheses specifically with Javascript or jQuery?

I am looking to create a formatted list using <ol> and <ul> tags with parentheses included. (1) List1 (2) List2 (3) List3 (4) List4 The challenge is to achieve this formatting purely with javascript or jQuery, without relying on any external ...

javascriptjqueryhtmlcss

Floating and scrolling navigation bar not functioning properly in bootstrap framework

I've been dabbling in coding for a while now, practicing at my current job. I managed to create a floating and scrolling navigation bar on the right side of my website using bootstrap. However, after taking a 3-week break and returning to my site, I n ...

jqueryhtmlcss

Display properties of a JSON object using VUEJS

How can I efficiently read JSON data in my VueJS code? Here is the code snippet: <template> {{data}} </template> <script> import axios from 'axios'; export default { data() { return { data: null }; }, mou ...

javascripthtmljsonvue.jsvuejs3

What is the best way to capture the click event when a child <td> element

Looking to retrieve the content within the <th> tag of the selected <td>. Refer to this fiddle for more information: http://jsfiddle.net/zrccq447/ The challenge lies in handling <th> elements with colspan 2 or 3. Here is the current cod ...

javascriptjqueryhtml

Two separate Bootstrap dropdowns are failing to function independently from each other

Can anyone help me prevent both buttons from displaying a drop-down when only one is clicked? https://i.stack.imgur.com/nvtbm.png Below is my HTML code: <form action="{{ url_for('crudSEapi.gcp_image_search') }}" method="post&q ...

html

Failure to respond to dual part form by RemoveClass

Currently, I am utilizing jQuery to visually control a form. The issue arises when trying to remove classes from the first part of the form using removeClass. While this works initially, upon clicking the button to advance to the second part of the form, t ...

javascriptjqueryajaxcss

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

javascripthtmljquerybootstrap-4fetch

Steps for converting a window to a PDF file rather than an XPS file

Whenever I attempt to print the contents of my HTML page using window.print(), it always creates an XPS file. However, what I really need is for it to generate a PDF file instead. Any assistance would be greatly appreciated. Thank you! ...

javascripthtmlpdfprintingpdf-generation

Is there a way to display the icon in Javascript?

I added a glyphicon element to my page but set its visibility to hidden using CSS. My goal is to reveal the glyphicon (#gl1) when users input text and click the "post" button, but I'm encountering an issue where the glyphicon doesn't show up when ...

javascripthtmlcsstwitter-bootstrap-3

Is there a way to apply a margin-top solely to the image section within the span?

I have a span that has a sparkling effect with an image before the text, but for some reason the image is aligned to the top. However, if I remove the image part and just use dots before it, it displays correctly. Current Display: Expected Outcome: CSS: ...

htmlcss

Tips for creating CSS3 animations in Angular triggered by mouse clicks

I'm working with a span that utilizes a Bootstrap icon. My goal is to fade out and fade in the same element (span) on click, while toggling the class (icon). There's a boolean variable called showLegend which determines whether or not to animate ...

htmlcssangularanimation