私の画像がHTMLで正しく整列していない

Question

透明なテキストオーバーレイで2枚の画像を作成しましたが、「テキストバナー」が重なり合わずに隣り合わせに座っているようには思えません。私はいろいろなことを調べましたが、誰も問題なく働いていませんでした。 これを修正する方法はありますか？

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

最も簡単な方法は、フレキシボックスの内側にあなたの箱をラップすることです。

display: flexトリックを行います。親要素にflex`：

あなたは `ディスプレイを追加しようとしました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>