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 that you have read and understand our privacy policy and code of conduct.

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