1
こんにちは私はこの2つの画像のタイトルを追加しようとしています。しかし、私がeまたはhを追加しようとするたびに、テキストは右端を下に移動します。私は間違っているの？私はちょうど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;
}
それは私を助けてくれるが、今は別の問題がある。フッターには私は "連絡先、言葉、社会的、権利"があり、私はそれらを列として置く必要があります、私は今、私はフレックスラップを使用する必要があるかフレックスボックスは変更がない – Raw