img元素内的标题不受id的影响

Question

我试图以不同的方式将标题与图像对齐，但它与图像卡住了，即使它的元素中有一个单独的id，我也无法更改其功能。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

caption元素在表中使用。如果你想将它与图像一起使用，我建议你将图像包裹在一个图形元素中，并添加一个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，也许名称是问题所在，但这一更改现在允许我编写现在有效的说明。感谢您提出使用地物元素标记的建议。我会试试的。