3

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

.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

1
  • ну, у меня они и так по вертикали в одну линию 13 авг 2020 в 18:05

2 ответа 2

7

Сейчас все выровнено по одной линии, с помощью 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>

3

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

Контейнеру задаём 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>

Ваш ответ

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

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