如何使用Bootstrap 4将居中于两个巨型飞轮之间的图像重叠?

时间:2019-02-28 00:30:12

标签: html css bootstrap-4

I want to do something like this

据我所知,在屏幕的上侧有一个巨型加速器,而在第一个巨型加速器下方的一个容器内有另一个巨型加速器。我想将图像居中放置在它们之间。

现在,我在HTML中有这个标签:

<header class="text-center">
        <div class="jumbotron mb-0">
            <h3>Text</h3>
            <h5>Text</h5>
        </div>
        <img src="routeOfTheImage" class="rounded-circle img-fluid">        
        <div class="container">
            <div class="row mt-0">
                <div class="col-12">
                    <div class="jumbotron"></div>
                </div>
            </div>
        </div>
    </header>

在CSS中,我有这个:

.contenedor-imagen{
    margin:0;
    padding: 0
}

.contenedor-imagen div{
    margin:0;
    padding: 0
}
header img{
    position: relative;
    bottom: 50px;
    height: 200px;
    width: 200px;
    margin: 0;
    padding: 0;
}

显示两个巨无霸之间有很大的填充,并且图像没有响应。我该怎么解决?

0 个答案:

没有答案