使用Bootstrap 4将图像居中放置在另一个图像的顶部

如果您使用背景图像作为背景图像,并且可以像下面这样缩短代码,效果会更好。以下是代码笔版本: http://codepen.io/johnsackson/pen/GdpNoQ

  <div class="container no-padding">
    <div class="row background-img vmiddle">
      <div class="col-12 text-center">
        <img src="http://www.efusionsoft.com/ready2go/assets/2013/09/500x500-490x490.gif" class="img-fluid">
      </div>
    </div>
  </div>

样式:

.background-img {
  background: url(https://www.ledr.com/colours/red.jpg)
    0 0 no-repeat;
  width: 100%;
  height: 800px;
}

.vmiddle {
  display: flex;
  align-items: center;
}

希望这就是你要找的。

如果将类“d-flex”和“justify content center”添加到父div中,则可以使用引导,它们是在引导4类中内置的

无编码 有很多方法可以做到这一点。我通常使用的方法(这是最简单的方法)是使用照片编辑器简单地编辑图像,然后将面部粘贴在中间,并将该图像用作背景。

带编码 另一种方法如下所示。您所要做的就是查看作为每个元素属性的CSS样式,并将它们复制到您的网站中。 http://simpodex.com/stackoverflowcontent/imageonimagetest.html

好了,现在它开始工作了。 我删除了引导程序,只使用了flexbox。

flex容器中的背景:

.container{
display: flex;
height: 300px;
background-image: url("../ordinateur.jpg");
}

图像:

.image{

width: 150px;
height: 150px;
margin: auto; /* center the image in the container */}