如何为照片添加标题
[英]how do I add a caption to the photo
问题描述
#title { text-align: center; color: #643F37; font-family: Arial; } h3 { margin-left: 700px; color: #643F37; font-family: arial; }.image { hight: 1000px; width: 500px; display: block; margin: 0px auto; postion: relative; } #main { background: hsl(0, 1%, 90%); font-family: times new roman; font-size: 40px; align-items: center; } #img-div { # } #img-caption.image { position: relative; left: auto; }
<head> <h1 id="title"> The story of Clarnece Jordan </h1> <h3> by clarence </h3> </head> <body> <main id="main"> <div id="img-div"> <img class="image" src="https://scontent-dfw5-2.xx.fbcdn.net/v/t1.6435-9/69294192_733858860396587_3589774459596177408_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=174925&_nc_ohc=vp-El7mg4WAAX_k529k&_nc_ht=scontent-dfw5-2.xx&oh=da307ba4e9977da7860d2dc87e333e85&oe=60926139"> </div> <div id="img-caption"> <p> this is a picture is form church <p> </div> </main> </body>
2 个解决方案
解决方案1
0 2021-04-08 23:01:31
You have to understant first the usage of html objects, I'd recommend you to take first a quick tutorial and be aware of the typos, this will make your development much easier.
您必须首先了解 html 对象的用法，我建议您先学习快速教程并注意拼写错误，这将使您的开发更加容易。 For your problem...对于你的问题...
This site may help you with your specific problem: https://www.w3schools.com/TAGS/tag_figcaption.asp该网站可以帮助您解决您的具体问题： https://www.w3schools.com/TAGS/tag_figcaption.asp
This page is extremely useful for begginers and has a lot of tutorials.这个页面对初学者非常有用，并且有很多教程。
Also I'd suggest to use classes instead of id's and make them reusable;另外，我建议使用类而不是 id，并使它们可重用； for example:例如：
.text-center { text-align: center; }.title { text-align: center; color: #643F37; font-family: Arial; }.subtitle { color: #643F37; font-family: arial; }.image { height: 1000px; width: auto; display: block; margin: 0px auto; }.main { background: hsl(0, 1%, 90%); font-family: times new roman; font-size: 40px; align-items: center; } figcaption { font-style: italic; padding: 2px; text-align: center; }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clarnece Jordan</title> </head> <body> <div class="main"> <h1 class="title text-center">The story of Clarnece Jordan </h1> <h3 class="text-center subtitle">by clarence</h3> <div> <img class="image" src="https.//scontent-dfw5-2.xx.fbcdn.net/v/t1.6435-9/69294192_733858860396587_3589774459596177408_n?jpg._nc_cat=107&ccb=1-3&_nc_sid=174925&_nc_ohc=vp-El7mg4WAAX_k529k&_nc_ht=scontent-dfw5-2.xx&oh=da307ba4e9977da7860d2dc87e333e85&oe=60926139"> <figcaption>This is a picture is form church</figcaption> </div> </div> </body> </html>
解决方案2
-1 2021-04-08 22:46:25
This site might be helpful: https://www.lifewire.com/caption-that-stays-with-image-3467838 .该站点可能会有所帮助： https://www.lifewire.com/caption-that-stays-with-image-3467838 。
Steps to an HTML Image Caption HTML 图像说明的步骤
- Add an image to your webpage.将图像添加到您的网页。
- In the HTML for your webpage, place a div tag around the image:在您网页的 HTML 中，在图像周围放置一个 div 标签：
- Add a style attribute to the div tag:将样式属性添加到 div 标签：
- Set the width of the div to the same width as the image, with the width style property:将 div 的宽度设置为与图像相同的宽度，使用 width 样式属性：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.