我的圖片在HTML中沒有正確對齊

Question

我用透明文本覆蓋圖製作了兩個圖像，但似乎並不想坐在一起，沒有一個「文本橫幅」與另一個重疊。我查了各種各樣的東西，但沒有一個真的沒有問題。 有什麼辦法解決這個問題嗎？

a.row1picture1 { 
 
     position: relative; 
 
     width: 400px; 
 
     display: flex; 
 
     \t flex-direction: column; 
 
     align-items: center; 
 
     justify-content: center; 
 
     
 
    } 
 
    
 
    a.row1picture1 img { 
 
    \t width: 400px; 
 
     height: 435px; 
 
     
 
    } 
 
    
 
    a.row1picture1 > h3 { 
 
    \t margin: 0; 
 
     position: absolute; 
 
    \t width: 100%; 
 
     text-align: center; 
 
     top: 70%; 
 
     transform: translateY(-50%); 
 
     
 
    } 
 
    
 
    a.row1picture1 > h3 span { 
 
    \t display: block; 
 
     color: black; 
 
     font-weight: bold; 
 
     font-size:20px; 
 
     background: rgb(0, 0, 0); /* fallback color */ 
 
     background: rgba(255, 255, 255, 0.6); 
 
     padding: 15px; 
 
     
 
    }

<a class="row1picture1"> 
 
      <img src="https://i.imgur.com/6DevsS5.png"/> 
 
      <h3><span>LIMITED EDITION</span></h3> 
 
     </a> 
 
     
 
     <a class="row1picture1"> 
 
      <img src="https://i.imgur.com/jm8QYjK.png"/> 
 
      <h3><span>NEW ARRIVALS</span></h3> 
 
     </a> 
 
     

Answer 1

最簡單的方法就是換一個Flexbox的裏面的箱子。

display: flex會做的伎倆。

你可以閱讀更多關於Flexbox的上MDN

.row { 
 
    display: flex; 
 
} 
 

 
a.row1picture1 { 
 
    position: relative; 
 
    width: 400px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
    
 
a.row1picture1 img { 
 
    width: 400px; 
 
    height: 435px;  
 
} 
 
    
 
a.row1picture1 > h3 { 
 
    margin: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
    top: 70%; 
 
    transform: translateY(-50%); 
 
} 
 
    
 
a.row1picture1 > h3 span { 
 
    display: block; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size:20px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(255, 255, 255, 0.6); 
 
    padding: 15px;  
 
}

<div class="row"> 
 
    <a class="row1picture1"> 
 
    <img src="https://i.imgur.com/6DevsS5.png"/> 
 
    <h3><span>LIMITED EDITION</span></h3> 
 
    </a> 
 
     
 
    <a class="row1picture1"> 
 
    <img src="https://i.imgur.com/jm8QYjK.png"/> 
 
    <h3><span>NEW ARRIVALS</span></h3> 
 
    </a> 
 
</div>