Заголовок внутри элемента img не зависит от идентификатора

Question

Я пытаюсь выровнять заголовок иначе, чем изображение, но он застрял на изображении, и я не могу изменить его функции, даже если внутри его элемента есть отдельный идентификатор. Id = 'img-caption', похоже, не влияет на элемент 'caption'.

HTML

<main id='main'>
<h1>Agha Hassan Abedi</h1>
<h2 id='title'>
  A tribute to Agha Sahib</h2>
  <div id='img-div'><img id='img' src='https://www.pakpedia.pk/files/Image/jpg/2c6ccb0373586eefb0f441936770a47a.jpg'></img><caption id='img-caption'>Picture of Agha Hassan Abedi</caption>
  </div>
<h3 id'tribute-info'>Agha Hasan Abedi, was a Pakistani banker and philanthropist. Abedi founded Bank of Credit and Commerce International in 1972. Abedi underwent a heart transplant operation in 1988, and died of a heart attack on 5 August 1995 in Karachi.</h3>
<a id-'tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Agha_Hasan_Abedi'>More Info</a>
</main>

CSS

#main {
  background-color: #eee;
}

#title {
  background-color: lightgray;
  text-align: center;
  width: 100%;
}
#img-div {
  background-color: lightblue;
  text-align:left;
}
#img-caption {
  background-color: gray;
}

#img {
  align: center;
  max-width: 100%;
  height: auto;
  #position: absolute;
  #center: 0px;
}

h1 {
  color: gray;
  font-family: Times New Roman;
  text-align: center;
}

https://codepen.io/wajieraja/pen/gOaeGvm

Answer 1

Элемент заголовка используется внутри таблицы. Если вы хотите использовать его с изображением, я предлагаю вам обернуть ваше изображение внутри элемента figure и добавить элемент figcaption. В вашем случае это не может быть примерно так:

#main {
  background-color: #eee;
  font: calibri;
}

#title {
  background-color: lightgray;
  text-align: center;
  width: 100%;
}
#img-div {
  background-color: lightblue;
  text-align:left;
}
#img-caption {
  background-color: gray;
}

#img {
  align: center;
  max-width: 100%;
  height: auto;
  #position: absolute;
  #center: 0px;
}

h1 {
  color: gray;
  font-family: Times New Roman;
  text-align: center;
}

<main id='main'>
<h1>Agha Hassan Abedi</h1>
<h2 id='title'>
  A tribute to Agha Sahib</h2>
  <figure id='img-div'><img id='img' src='https://www.pakpedia.pk/files/Image/jpg/2c6ccb0373586eefb0f441936770a47a.jpg'><figcaption id='img-caption'>Picture of Agha Hassan Abedi</figcaption>
  </figure>
<h3 id'tribute-info'>Agha Hasan Abedi, was a Pakistani banker and philanthropist. Abedi founded Bank of Credit and Commerce International in 1972. Abedi underwent a heart transplant operation in 1988, and died of a heart attack on 5 August 1995 in Karachi.</h3>
<a id-'tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Agha_Hasan_Abedi'>More Info</a>
</main>

Answer 2

Я изменил имя элемента с caption на h3, возможно, проблема была в названии, но это изменение теперь позволяет мне писать инструкции, которые теперь работают. Спасибо за предложения использовать тег элемента figure. Попробую.