將2個div（不同寬度）與flexbox列垂直對齊-有解無憂

我正在嘗試垂直對齊 2 個 div，如下圖所示，使用 flex 框：應該如何

但是帶有圖片描述的第二個 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>

uj5u.com熱心網友回復：

您需要將帶有類的 div 放在museum-labelanchor(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>

uj5u.com熱心網友回復：

使用 CSS 使父項居中的兩種方法：

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

要么

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

將其添加到父元素后，子元素或子元素都將在所有維度中正確居中。

uj5u.com熱心網友回復：

你需要把保證金：0自動；將其居中。試試這個代碼

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

uj5u.com熱心網友回復：

按照選擇器 .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>

uj5u.com熱心網友回復：

改為設定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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444996.html

標籤：html css 弹性盒

上一篇：按鈕可以使用位置：絕對；位于頁面中心嗎？[復制]

下一篇：ReactFluentUI-更改復選框選中標記和標簽的顏色