我正在尝试在它们下面添加这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©-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>
希望它可以帮到你。