Выровнять 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://lumtu.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):

Похожие темы	Дата
Видео уроки по PHOTOSHOP качаем	19.10.2024, 18:10
Ищу BRUSHEZZ по нефтегазовой и энерго тематике	19.10.2024, 18:10
Дизайн меню сайта - где лучше разместить?	19.10.2024, 18:10
Заполнение внутри плавающего элемента div \| Нужна помощь	19.10.2024, 18:10
Отображение шахматных символов сянци	19.10.2024, 18:10
Мне нужна помощь с простым домашним заданием по HTML. [Теперь решено, администраторы, пожалуйста, удалите тему. Спасибо за сотрудничество.	19.10.2024, 18:10
Лучший способ подойти к созданию нового веб-сайта	19.10.2024, 18:10
Проблема с HTML в Twitter Card – чего нам не хватает	19.10.2024, 18:10
Доступен качественный автор контента	19.10.2024, 18:10
Показывать достижения значков под аватаркой в bbpress	19.10.2024, 18:10

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

cristallmaiden

bzmax

I AM

Интересно