我的图片在HTML中没有正确对齐

我用透明文本覆盖图制作了两个图像，但似乎并不想坐在一起，没有一个“文本横幅”与另一个重叠。我查了各种各样的东西，但没有一个真的没有问题。有什么办法解决这个问题吗？我的图片在HTML中没有正确对齐

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>

来源

2017-10-16 Miki Ang

你试图添加'显示：在父元素flex'？ – Krusader

你想重叠这两个图像或想坐在彼此相邻。 – omkara

最简单的方法就是换一个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>

来源

2017-10-16 11:57:15

我的图片在HTML中没有正确对齐

回答

相关问题