不能添加图片的标题

问题描述：

你好，我试图添加这2张图片的标题吼他们。但是，每次我尝试添加食客h或p时，文字都会将右侧做到底部。我做错了什么？我刚开始学习HTML，我真的很喜欢它，但我卡住了，这是为我的考试。需要帮助，请提前致谢。不能添加图片的标题

<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="css/style.css"> 
     <title>Comenzando la Fotografia</title> 
    </head> 
    <body> 
     <div class="contenido"> 
      <div id="pagetitle"> 
       <h1>Comenzando la Fotografia</h1> 
      <div id="navigation"> 
       <ul id="nav_item"> 
        <li><a href="index.html" id="inicio">Inicio</a></li> 
        <li><a href="paisajes.html" style="text-decoration: underline">Paisajes</a></li> 
        <li><a href="retratos.html" style="text-decoration: underline">Retratos</a></li> 
       </ul> 
       <div style="clear:both"></div> 
      </div> 
      </div> 
      <div> 
       <section id="central"> 
        <img id="centralpic" style="align-content: center" src="img/paisajecentral.png" alt="imagencentral" title="paisaje1" width="730" height="413"> 
       </section> 
       <article id="sidebyside"> 
        <img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400"> 
        <img id="rightpic" src="img/woman.jpg" alt="imagenizquierda" title="retrato1" width="736" height="1104"> 
       </article> 
      </div> 
      <footer class="piedepagina"> 
       <div id="footer1"> 
        <section id="contact"> 
         <h3>Contacto</h3> 
         <p>Correo: <a href="mailtome:[email protected]">[email protected]</a></p> 
         <p>Calle 3ra Avenida la Paz</p> 
         <p>Telefono: 220-0000</p> 
        </section> 
        <section id="terms"> 
         <h3>Terminos</h3> 
         <p>Nos reservamos los derechos de autor y todo contenido es privado</p> 
        </section> 
        <section id="redes_sociales"> 
         <h3>Redes Sociales</h3> 
         <a target="_blank" href="https://www.facebook.com"><img src="icon/facebook.png">Comenzando la Fotografia</a> 
         <a target="_blank" href="https://twitter.com/"><img src="icon/twitter.png">@comenzandolafotografia</a> 
         <a target="_blank" href="https://www.instagram.com/?hl=en"><img src="icon/instagram.png">#comenzandolafotografia</a> 
        </section> 
        <section id="rights"> 
         <h3>Derechos</h3> 
         <p>Ruben De La Rosa</p> 
         <p>Copyrights&#169;-2017</p> 
        </section> 
       </div> 
      </footer> 
     </div> 
    </body> 
</html> 


    body{ 
    background-color: #02010a; 
    color: white; 
} 
.contenido{ 
    width: 900px; 
    margin: 0 auto; 
    text-align: center; 
} 
#pagetitle{ 
    background-color: #5b7989; 
    width: 100%; 
    height: 100px; 
    margin-top: 0 auto; 
    display: block; 
    position: relative; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10xp; 
} 
h1{ 
    float: left; 
    display: inline-block; 
    text-shadow: 2px 2px #02010a; 
    padding-left: 10px; 
} 
a{ 
    text-decoration: none; 
} 
ul li a{ 
    color: white; 
} 
#navigation{ 
    float: right; 
} 
#nav_item{ 
    list-style-type: none; 
    font-size: 100%; 
    padding: 10px 10px 10px 10px; 
} 
li{ 
    display: inline; 
} 
#central{ 
    background-color: #82c3a6; 
    width: 900px; 
    height: 450px; 
    display: block; 
    position: relative; 
} 
#centralpic{ 
    align-content: center; 
    margin-top: 15px; 
} 
#sidebyside{ 
    background-color: #d5c75f; 
    border-width: 1px; 
    display: flex; 
    height: 500px; 
    width: 900px; 
    overflow: hidden; 
    align-content: center; 
} 
#leftpic{ 
    height: 300px; 
    width: auto; 
    position: relative; 
    margin: 60px auto;; 
} 
#rightpic{ 
    height: 300px; 
    width: auto; 
    position: relative; 
    margin: 60px 70px auto; 
    align-content: center; 
}

答

包装你<img>元素<figure>元素后<img>元素添加<figcaption>元素。所以你的代码是这样的：

<figure> 
<img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400"> 
<figcaption>Your text here</figcaption> 
</figure>

希望它能帮助你。

好吧，那帮了我很多，但现在我有另一个问题。在页脚中，我有“联系人，条款，社交和权利”，我需要将它们作为列，现在我需要使用弹性包装或显示弹性框没有任何变化 – Raw

不能添加图片的标题

相关推荐