HTML добавление текста рядом с изображением

Недавно начал изучать html, и у меня возникли трудности с добавлением текста прямо к изображению. Это код до сих пор:

<!DOCTYPE html>
<html lang="en">

  <head>

<title>Cats</title>

<style>
  .image {
    display: inline-block;
  }

</style>
<style>
  .image1 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
  }

  .image1 img {
    margin: 0px 0px -105px -155px;
  }

  .image2 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
  }

  .image2 img {
    margin: 0px 0px -105px -55px;
  }

  .image3 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
  }

  .image3 img {
    margin: 0px 0px -110px -25px;
  }

  font {
    text-shadow: 1px 1px black
  }

</style>
  </head>

  <body>
<div id="banner" style="overflow: hidden; display: inline-block;">
  <div class="image1" style="max-width: 50%; max-height: 50%;">
    <img src="https://images.unsplash.com/photo-1618813576930-12cf7ad6dc31?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8a2l0dGllc3xlbnwwfHwwfHw%3D&w=1000&q=80" width="400px">
    <font face="arial" size="5px" color="orange"><b>Ginger cat</b></font>

  </div>
  <hr>
  <div class="image2" style="max-width: 50%; max-height: 50%;">
    <img src="https://image.shutterstock.com/image-photo/british-shorthair-kitten-silver-color-260nw-1510641710.jpg" width="373px">
    <font face="arial" size="5px" color="White"><b>White cat</b></font>
  </div>
  <hr>
  <div class="image3" style="max-width: 50%; max-height: 50%;">
    <img src="https://images.unsplash.com/photo-1595433707802-6b2626ef1c91?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" width="275px">
    <font face="arial" size="5px" color="Black"><b>Serious cat</b></font>
  </div>
</div>

Пробовал использовать style="float:left" или style="float:right", но это вообще не сработало. Также есть ли у вас какие-либо книги или видео-рекомендации для HTML?

Спасибо за любую помощь.

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Лучше всего использовать позицию Вы можете прочитать о позиции здесь

и для своего кода вы можете использовать это как свой css

.image1 {
    position: relative;
}

.image1 font {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

также для учебника по html я предлагаю DevEd на youtube Надеюсь, это было полезно

Другие вопросы по теме