CODEWITHSUNDEEP
htmlcssimage
Miki
Miki

Reputation: 3

My pictures don't align well properly in HTML

I made two images with a transparent text overlay, but it doesn't seem to want to sit next to each other without one of the "text banners" overlapping the other. I've looked up various things but none of them really worked without issue. Is there any way to fix this?

 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; 
        
    }
  <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>

Upvotes: 0

Views: 72

Answers (1)

Fez Vrasta
Fez Vrasta

Reputation: 14835

The easiest way is to wrap your boxes inside a flexbox.

display: flex will do the trick.

You can read more about flexbox on 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>

Upvotes: 1

Related Questions