html - img 元素内的标题不受 id 的影响
问题描述
我正在尝试以不同的方式将标题与图像对齐,但它与图像卡住了,即使它在其元素中有单独的 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;
}
解决方案
标题元素在表格内使用。如果您想将它与图像一起使用,我建议您将图像包装在一个图形元素中并添加一个 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>
推荐阅读
- angular - 使用 AWS Amplify 将文件上传到 S3 时获取上传进度状态
- python - Python RE re.split(),结果以空字符串开头
- python-3.x - 如何获取 ctypes-pointer 数据的格式字符串
- imagemagick - 无法使用带有 openEXR 的 ImageMagick 更改 EXR 文件的通道深度
- reactjs - DayPickerInput 限制日期选择
- python - 在 numpy 2darray 中逐行查找大于阈值的值的索引
- service - Flutter 中用于检查互联网连接的广播接收器
- spring - java.lang.NoClassDefFoundError:org.springframework.context.support.ClassPathXmlApplicationContext
- google-analytics - 我正在使用 GA 跟踪文件下载,我想从其他软件访问下载数据
- ios - 无法将“UITableViewCell”类型的值转换为“SwipeCellKit.SwipeTableViewCell”