1

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

.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>

введите сюда описание изображения

2 ответа 2

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>

3
  • Зачем менять inline на inline-block,на свойство veritacal-align: baseline это не повлияет.И судя по картинке требуется middle,что я ниже и указал 26 янв 2018 в 13:39
  • Я вроде указал, что возможностей куча, все зависит от ситуации.
    – Air
    26 янв 2018 в 13:41
  • Ну если автору нужен верхний отступ,тогда да... 26 янв 2018 в 13:48
1

Измените на

.icon{
    vertical-align: middle;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.