Как выровнять текст и иконку по центру?

08 мая 2021, 22:20

Как выровнять текст и иконку по центру,чтобы они были на одном уровне ? На данный момент текст находится у нижней части иконки.

.responsive__offer-icon{ 
	display: inline-block; 
} 
 
.responsive__offer-text{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 14px; 
	color: #83a7a5; 
	display: inline-block; 
} 
 
.fa-check-circle{ 
	font-size: 26px; 
	margin-right: 10px; 
	color: #87aaa8; 
}

<div class="responsive__offer"> 
                <div class="responsive__offer-icon"> 
                  <i class="far fa-check-circle"></i> 
                </div> 
                <p class="responsive__offer-text">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> 
 
               </div>

Answer 1

Если брать Ваш фрагмент кода, можно для fa-check-circleзадать vertical-align: middle;

.responsive__offer-icon{ 
	display: inline-block; 
} 
 
.responsive__offer-text{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 14px; 
	color: #83a7a5; 
	display: inline-block; 
} 
 
.fa-check-circle{ 
	font-size: 26px; 
	margin-right: 10px; 
    color: #87aaa8; 
    vertical-align: middle; 
}

<div class="responsive__offer"> 
    <div class="responsive__offer-icon"> 
        <i class="far fa-check-circle"></i> 
    </div> 
    <p class="responsive__offer-text">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> 
 
</div> 
<script src="https://kit.fontawesome.com/c7ecb22548.js"></script>

Answer 2

vertical-align: middle; для иконки.

+можно выровнять через

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

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как вывести данные в порядке обратном от того, в котором они лежат в БД?

У меня есть поле поле pipe_n, в котором данные лежат так:

103

Работа с БД из двух приложений

Есть два приложения:

127

Реализация сочетания клавиш в консоли

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

108

Упрощение кода по нажатию на элемент C#

только начинаю работать с C#, тут возник вопросУ меня есть тут много элементов (стрелок), у которых действия при нажатии почти идентичны, лишь...

112