Разместить иконки на одном уровне с текстом

349

28 января 2018, 00:56

Привет, посмотрите пожалуйста мой код, и подскажите, как разместить иконки на одном уровне с текстом?

.about__mission__right{ 
	float: right; 
	width: 411px; 
	height: 344px; 
} 
 
.icon{ 
	padding-top: 35px; 
} 
 
h4{ 
	padding-left: 12px; 
	display: inline-block; 
	font-size: 16px; 
	font-weight: bold; 
	color: #4e8598; 
} 
 
.light__text{ 
	padding-left: 30px; 
	display: inline-block; 
	font-size: 15px; 
	font-weight: lighter; 
	color: #b0b2b3; 
}

<div class="about__mission__right"> 
						<h3>О заслугах</h3> 
						<img class="icon" src="img/bug.png" alt=""> 
						<h4>Волшебный жук</h4> 
						<p class="light__text">Позволяет быть в тонусе</p> 
 
						<img class="icon" src="img/bell.png" alt=""> 
						<h4>Волшебный жук</h4> 
						<p class="light__text">Позволяет быть в тонусе</p> 
 
						<img class="icon" src="img/storm.png" alt=""> 
						<h4>Волшебный жук</h4> 
						<p class="light__text">Позволяет быть в тонусе</p> 
 
						<img class="icon" src="img/camera.png" alt=""> 
						<h4>Волшебный жук</h4> 
						<p class="light__text">Позволяет быть в тонусе</p> 
					</div>

Answer 1

Измените на

.icon{
    vertical-align: middle;
}

Answer 2

Вариантов много, это один из вариантов

  .icon {
  display: inline-block;
  background: red;
}

.about__mission__right { 
  float: right; 
  width: 411px; 
  height: 344px; 
  background: gray; 
} 
 
.icon { 
  display: inline-block; 
  background: red; 
} 
 
h4 { 
  padding-left: 2px; 
  display: inline-block; 
  font-size: 16px; 
  font-weight: bold; 
  color: #4e8598; 
} 
 
.light__text { 
  padding-left: 30px; 
  display: inline-block; 
  font-size: 15px; 
  font-weight: lighter; 
  color: #b0b2b3; 
}

<div class="about__mission__right"> 
  <h3>О заслугах</h3> 
  <img class="icon" src="img/bug.png" alt="bug.png"> 
  <h4>Волшебный жук</h4> 
  <p class="light__text">Позволяет быть в тонусе</p> 
 
  <img class="icon" src="img/bell.png" alt="bell.png"> 
  <h4>Волшебный жук</h4> 
  <p class="light__text">Позволяет быть в тонусе</p> 
 
  <img class="icon" src="img/storm.png" alt="storm.png"> 
  <h4>Волшебный жук</h4> 
  <p class="light__text">Позволяет быть в тонусе</p> 
 
  <img class="icon" src="img/camera.png" alt="camera.png"> 
  <h4>Волшебный жук</h4> 
  <p class="light__text">Позволяет быть в тонусе</p> 
</div>