我的图片在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>
答
最简单的方法就是换一个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>
你试图添加'显示:在父元素flex'? – Krusader
你想重叠这两个图像或想坐在彼此相邻。 – omkara