Блог

Главная - Вопросы по программированию - Как получить изображение и текст внутри значка рядом?

Как получить изображение и текст внутри значка рядом?

#javascript #css #frontend

Вопрос:

Я хочу получить небольшое изображение в формате png и немного текста рядом с иконкой, как добиться того, чтобы в настоящее время оно находилось вертикально? Это порядок, в котором я в настоящее время хочу получить два вместе, вместо этого разделение само по себе отличается, потому что они находятся в другом подклассе внутри этого класса messagecontent.

Комментарии:

1. Пожалуйста, добавьте свои текущие коды.

Ответ №1:

Используйте CSS flexbox. Пример кода :

 .image-wrapper{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  background:#eee;
  padding:1rem 2rem;
  border-radius:1rem;
}

.image-wrapper img{
  height:2rem;
  margin-right:1rem;
 }
 
.image-wrapper p{
  font-size:1.8rem;
 } 
 <div class="image-wrapper">
  <img src = "https://www.freepnglogos.com/uploads/google-logo-png/google-logo-icon-png-transparent-background-osteopathy-16.png" alt="logo"/>
  <p>Some random text</p>
</div>

Обратитесь к этой ссылке, чтобы узнать больше о CSS flexbox link

Комментарии:

1. Почему бы не поместить это в доступный для выполнения фрагмент, чтобы показать пример? (от меня нет отрицательного ответа, только предложение) Используйте <> значок в редакторе.

2. Спасибо @PaulT. за идею. Я сделал то же самое.

Метки: