【问题标题】:CSS - image over another image , both centeredCSS-图像在另一个图像上,都居中
【发布时间】:2016-03-31 10:58:55
【问题描述】:

我有两张图片,一张在一张。 像这样:

但是,当屏幕调整大小时,“播放图像”不居中(像这样:

这是我的html:

<div class="flapImage" id="idHot">                        
     <img src="images/hot.png" style="position:relative; top:0; left:0; max-width:390px;" width="100%" height="190px" />
     <img src="images/watchVideoP.png" width="200px" style="position:absolute; top:120px; left:80px;" />
</div>

这是我的 CSS:

.flapImage{
   margin:0 auto;
   text-align:center;
   top:0;
   left:0;
   background-color:black;
}

你知道另一种方法吗?

【问题讨论】:

标签: html css image


【解决方案1】:

添加此属性

<div class="flapImage" id="idHot">                        
     <img src="images/hot.png" style="position:relative; top:0; left:0; max-width:390px;" width="100%" height="190px" />
     <img src="images/watchVideoP.png" width="200px" style="position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%);" />
</div>

【讨论】:

  • 标记为重复更好。但是,是正确答案之一
【解决方案2】:

使用绝对和相对定位,使主图相对和其他绝对。 然后将其写在悬停的图像类中:

left: 50%;
top: 50%;
transform: translate(-50%, -50%)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-01-29
    • 1970-01-01
    • 1970-01-01
    • 2023-04-06
    • 2014-06-02
    • 2021-05-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多