Question

我制作了两张带有透明文字叠加层的图片，但它似乎并不希望彼此相邻，而没有一个＆＃34;文字横幅＆＃34;重叠另一个。我查了很多东西，但没有一个真正有效。有什么方法可以解决这个问题吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

最简单的方法是将您的盒子包装在Flexbox中。

display: flex可以解决问题。

您可以在MDN

上阅读有关flexbox的更多信息

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

我的图片在HTML中无法正确对齐

1 个答案: