Выровнять 2 поля по вертикали с изображением между ними

[cristallmaiden]

Я пытаюсь выровнять 3 поля и 2 изображения.

2 поля вертикально, между которыми находится изображение.

Справа от них стоит третий ящик со стрелкой img, указывающей на него вот так:


Это то, что я пробовал:

CSS:

<div>
<div className="box">
Box 2
</div>
<div className="cont1">
<div className="burning">
</div>
<div> IMG2 </div>
<div className="box">Box 3</div>
</div>
<div className="box">
Box 1
</div>
</div>

Код (разметка): Html:
.cont1 { display:flex; flex-direction:row; } .box{ margin:0 auto; width: 80px; height: 80px; background: #8C8C8C; border: solid 3px #8B0000; } .burning{ background-image : url("[URL='https://wmlogs.com/yti/awZZwaWZodHRwOi8vaS5oaXpsaXJlc2ltLmNvbS9WRHJ2UnkunU2']http://i.hizliresim.com/VDrvRy.gif[/URL]"); width: 350px; height: 250px; }
Код (разметка): Вот как это выглядит:



Я также хочу отцентрировать их

 

[bzmax]

Извините, что никто не ответил.

Я бы сделал что-то вроде этого:
https://jsfiddle.net/xn24umah/

.container{ margin:auto; width:800px; height: 400px; border: 1px solid #000;
}
.container div:nth-child(1){ margin:auto; margin-top:10px; width:300px; height: 100px;
}
span{ display: block;
padding-top:40px;
}
.container div:nth-child(1) + div{ margin:auto; margin-top:10px; width:300px; height: 100px;
}
.container div:nth-child(1) + div + div{ margin:auto; margin-top:10px; width:300px; height: 100px;
}
.container div:nth-child(1) + div div{
width: 50px;
height: 80px;
margin-right: 24px;
float:left;
border: 1px solid #000;
}

HTML:
<div class="container"> <div> <span>content 1</span> </div> <div> <div></div> <div></div> <div></div> </div> <div> <span>content3</span> </div> </div>
Код (CSS):