Как разместить элементы на одной линии html css

545

24 ноября 2016, 10:17

Хочу разместить элементы в таком порядке, т.е. все на одной линии

Каждая картинка должна быть с отступами от левого/правого края на 40px от основного контента

HTML

<div id="block2">       
    <img src="img/smmini.png">
    <h1>Заслуженный герой<br><p>Советского союза<p></h1>
    <img src="img/smmini.png">
 </div>

Answer 1

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
#block2 { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  padding: 0 40px; 
} 
h1 > span { 
  display: block; 
} 
img { 
  background: #ccc; 
  width: 100px; 
  height: 100px; 
}

<div id="block2"> 
  <img src="img/smmini.png"> 
  <h1>Заслуженный герой  
     <span>Советского союза</span> 
  </h1> 
  <img src="img/smmini.png"> 
</div>