How to add an image in the middle of 2 buttons - html

Question

I was trying to center an image right in between 2 different buttons, the left button & right button with the image in the middle. All my efforts have failed.
Below here is the code snippet of the image I centered:
html,
body {
height: 100%;
}
.parent {
height: 750px;
background: #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 100px;
height: 100px;
}
<div class="parent">
<div class="child">
<img src="https://i.postimg.cc/26K2ZdHb/juice.jpg" height="200px" width="200px" alt="picture" />
</div>
</div>
My goal
My goal was to have the image in the middle of 2 buttons like in this edited screenshot

Answer 1

You can force your images width and height to fit-content on the image element => child element.
html,
body {
height: 100%;
}
button {
background-color: skyblue;
width: 100px;
height: 50px;
border: 8px solid black;
}
.parent {
height: 750px;
background: #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
}
.flex-child:not(:nth-of-type(1)) {
margin-left: 10px;
}
.child {
margin-left: 10px;
width: fit-content;
height: fit-content;
}
<div class="parent">
<button class="flex-child"></button>
<div class="child flex-child">
<img src="https://i.postimg.cc/26K2ZdHb/juice.jpg" height="200px" width="200px" alt="picture" />
</div>
<button class="flex-child"></button>
</div>

Answer 2

Remove widhs and heights from your elements unless strictly necessary, and then use flex with space-between or space-evenly or space-around on your parent to spread the three children out horizontally. You could remove the divs from around the two buttons, it will work without. I just like to keep divs around "columns" like this, Bootstrap-style:
.parent {
background: #CCCCCC;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.child {
/* width: 100px;
height: 100px; */
}
button {
background: blue;
padding: 0.5rem 1.8rem;
border: 0;
color: #fff;
border-radius: 4px;
}
<div class="parent">
<div class="child">
<button>Button to the left</button>
</div>
<div class="child">
<img src="https://i.postimg.cc/26K2ZdHb/juice.jpg" height="200px" width="200px" alt="picture" />
</div>
<div class="child">
<button>Button to the right</button>
</div>
</div>

Answer 3

Your code has no big flaw at all.
You just messed up the image size.
Look that image is 200px wide and high, but child class only 100px.
Just fix that and everything goes well.
html,
body{
height: 100%;
}
.parent {
height: 750px;
background: #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 200px;
height: 200px;
padding-left: 1em;
padding-right: 1em;
}
.buttons {
background-color: skyblue;
width: 10em;
height: 5em;
border: 8px solid black;
}
<div class="parent">
<button type="button" class="buttons"></button>
<div class="child">
<img src="https://i.postimg.cc/26K2ZdHb/juice.jpg" height="200px" width="200px" alt="picture" />
</div>
<button type="button" class="buttons"></button>
</div>