set an image between two div in html - html

Question

I have two div A and B.
Now I want to set an image for both div like below image.
HTML
<div class="navbar-slider">
<div class="navbar"></div>
<img src="image_src" alt="Test Image">
<div class="slider"></div>
</div>
Can't understand what will be the css position.
Anybody help please? Thanks in advance.

Answer 1

.navbar-slider {
display: flex;
flex-direction: column;
}
.navbar {
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
transform: translate(25%, 0%);
background-color: green;
}
img {
width: 202px;
position: absolute;
transform: translate(25%, 50%);
border-radius: 50%;
z-index: 9999;
}
.slider {
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
transform: translate(25%, 100%);
background-color: yellow;
}
<div class="navbar-slider">
<div class="navbar"></div>
<img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" alt="Test Image">
<div class="slider"></div>
</div>

Answer 2

HTML
<div></div>
<img src="image_src" alt="Test Image">
<div></div>
CSS
div{
height: 200px;
}
img{
height: 200px;
position: absolute;
top: 100px;
}

Answer 3

Just use position absolute and translate it Y -50%, by this it will always vertical center half of its height
.navbar {background: #ccc;height: 100px;}
.navbar-slider {position: relative;}
img{
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.slider {background: #333;height: 100px;}
<div class="navbar-slider">
<div class="navbar">Upper</div>
<img src="https://i.stack.imgur.com/12F8N.png" alt="Test Image">
<div class="slider">Lower</div>
</div>

Answer 4

Try this.
.navbar{height:100px;background-color:#d37245;}
img{width:200px;position:relative;}
.img{ margin: 0; position: absolute; left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.slider{height:100px;background-color:#d34545;}
<div class="navbar-slider">
<div class="navbar"></div>
<div class="img">
<img src="https://dcassetcdn.com/design_img/1559024/551167/551167_7840631_1559024_911ff84c_image.png" alt="Test Image">
</div>
<div class="slider"></div>
</div>