Question

我需要使用以下CSS重叠两个我居中的图像：

display: block;
margin: auto;

目前的情况是这个 -

The current situation

我希望较大的图像（现在位于右下角）和较小的图像以及文本没有会丢失已经居中的位置。我尝试使用z-index并将位置设置为relative和absolute，但这只会影响图像的对齐。

HTML：

<img id="logo" src="Pics/logo1.png" class="animated bounceInUp">  
<img id="wall" src="Pics/Ywall1.png">

CSS：

#logo
{
    height: 200px;
    width: 200px;
    display: block;
    margin: auto;
    padding-top: 15%;
}

#wall
{
    height: 500px;
    display: block;
    margin: auto;
}

还尝试了这个的答案，但我又遇到了问题。调整top和left值不仅是一个令人头痛的问题，而且还无法提供完美的居中。

这： Overlap Images In Center [css]

P.S- Stackoverflow不会让我嵌入图像并嵌入2个链接，直到我得到10个代表。对不起。

Answer 1

是否可以将较大的图像作为背景？

#wall {
    height: 413px;
    width: 620px;
    display: block;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('http://cdn2.spectator.co.uk/files/2016/07/wall.jpg');
    text-align: center;
  }

<div id="wall">
  <div>
      <img id="logo" src="https://logopond.com/avatar/1862/logoholik-icon-logopond2.png" class="animated bounceInUp"> 
      <div>Logo Text!</div>
  </div>
 </div>

重叠2张图像而不会失去居中

1 个答案: