Как выровнять все элементы в один ряд?

Question

Как мне подвинуть картинку или параграфы что бы они были в один ряд?

.list__heading,
.list__paragraph {
  display: inline-block;
}

.list__heading {
  padding-left: 24px;
  font-size: 16px;
  font-weight: bold;
  color: #4e8598;
}

.list__paragraph {
  font-size: 15px;
  color: rgba(47, 56, 59, 0.48);
  margin-left: 29px;
}

<div class="list__item">
  <img src="https://icons.iconarchive.com/icons/treetog/junior/32/camera-icon.png" alt="bug">
  <h4 class="list__heading">Волшебный жук</h4>
  <p class="list__paragraph">Позволяет быть в тонусе</p>
</div>

Ссылка на CodePen

Answer 1

Сейчас все выровнено по одной линии, с помощью CSS Grid Layout:

body {
  font-family: Tahoma, sans-serif;
  color: #2f383b;
  padding: 0;
  margin: 0;
}

.list__item {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
}

.list__heading {
  font-size: 16px;
  font-weight: bold;
  color: #4e8598;
  padding-left: 24px;
}

.list__paragraph {
  font-size: 15px;
  color: rgba(47, 56, 59, 0.48);
  margin-left: 29px;
}

<div class="list__item">
  <img src="https://icons.iconarchive.com/icons/treetog/junior/32/camera-icon.png" alt="bug" />
  <h4 class="list__heading">Волшебный жук</h4>
  <p class="list__paragraph">Позволяет быть в тонусе</p>
</div>

Answer 2

Для этого очень подойдут флексы

Контейнеру задаём display: flex, в нём по умолчанию направление оси по вертикали, элементы становятся в линию, в данном случае основная флексовая ось у нас - вертикаль. Чтобы выровнять по горизонтали, нам нужно выровнять по дополнительной флексовой оси - за это отвечает align-items

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
}

img {
  display: block;
  max-width: 100%;
}

.list__heading {
  font-weight: bold;
  color: #4e8598;
}

.list__paragraph {
  font-size: 15px;
  color: rgba(47, 56, 59, 0.48);
}

.list__item {
  display: flex;
  align-items: center;
}

.list__item > *:not(:last-child) {
  margin-right: 10px;
}

<div class="list__item">
  <img src="https://icons.iconarchive.com/icons/treetog/junior/32/camera-icon.png" alt="bug">
  <h4 class="list__heading">Волшебный жук</h4>
  <p class="list__paragraph">Позволяет быть в тонусе</p>
</div>

БЛОГ НА HUSL

Как выровнять все элементы в один ряд?

Ответы (2 шт):