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:

```css
html,
body {
  height: 100%;
}

.parent {
  height: 750px;
  background: #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 100px;
  height: 100px;
}
```

```html
<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
[![](https://i.stack.imgur.com/BHMJv.png)](https://i.stack.imgur.com/BHMJv.png)