Hola comunidad, he estado revisando y revisando mi código y no doy con la posición que necesito.
Sucede que no puedo centrar una etiqueta
section en el cuerpo de la sección correspondiente a mi página, y además de eso mucho menos puedo centrar una imágen dentro de la misma etiqueta
section. He intentado de varias formas y no me sale. ¿Alguno de ustedes sugiere algo?.
Voy a dejar el Html y el Css por acá para que lo prueben:
Html:
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Smooth scroll horizontal o vertical</title>
<!-- Cargamos estilos -->
<link rel="stylesheet" type="text/css" href="estilos/estilos.css">
</head>
<body>
<div class="fixed">
<section id="secciones_cabecera">
<!--Aquí se añade la siguiente seccion-->
<a href="#s1">Home</a>
<a href="#s2">News</a>
<a href="#s3">Contests</a>
<a href="#s4">Enterviews</a>
<a href="#s5">Articles</a>
<a href="#s6">Luminis Art!</a>
<a href="#s7">Misc</a>
<a href="#s8">TG of the Day</a>
</section>
</div>
<!-- ESTE ES EL CUERPO DE CADA PÁGINA-->
<!-- HOME (CUERPO) -->
<section id="s1">
<section id="espacio1"></section>
<section id="logo"><img src="./img/logo_centrado.png"></section>
<article id="texto_principal">TIBIA GIRLS</article>
<article id="texto_secundario">COMUNITY GIRL FOR TIBIAN PLAYERS</article>
</section>
<!-- FIN / HOME (CUERPO) -->
<section id="s2">
</section>
<section id="s3">
</section>
<section id="s4">
</section>
<section id="s5">
</section>
<section id="s6">
</section>
<section id="s7">
</section>
<section id="s8">
</section>
<!-- Importamos libreria jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Plugin para dar mas efecto a nuestro scroll -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Importamos nuestro script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Código:
*{
margin:0;
padding:0;
}
html, body{
width:100%;
height:100%;
}
body{
font-family: 'Arial';
background:green;
}
a{
text-decoration:none;
color: gray;;
}
a:hover{
color:#FFC400;
}
ul{
display:inline-block;
}
#s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8{ /*Para agregar otra sección se añade una etiqueta con la id "S#" donde número es el número de la sección -1-*/
width:100%;
height:100%;
} /*-1- aquí se agrega la estiqueta "S#"* correspondiente al numero de la sección*/
#s1{
background:#FF6666;
}
#s2{
background:#FEF0E4;
}
#s3{
background:#000;
}
#s4{
background:green;
}
#s5 {
background: purple;
}
#s6 {
background: orange;
}
#s7 {
background: pink;
}
#s8 {
background: orange;
}
.fixed{
z-index:999;
position:fixed;
width:100%;
background:white;
border-bottom:1px solid #ccc;
height: 10%;
}
#secciones_cabecera {
text-align: center;
margin-top: 2.5%;
}
#secciones_cabecera >a {
background-color: transparent;
padding-left: 3%;
padding-right: 3%;
}
/* HOME --- CUERPO*/
#espacio1 {
background-color: transparent;
width: 100%;
height: 25%;
visibility: hidden;
}
#logo {
width: auto;
height: 25%;
background-color: blue;
/*background-image: url(../img/logo_centrado.png);*/
background-repeat: no-repeat;
background-position: center;
position: relative;
}
#texto_principal, #texto_secundario {
width: 100%;
height: auto;
background:red;
color: white;
text-align: center;
font-size: 4em;
}
#texto_secundario {
font-size: 1.5em;
background: green;
margin-right: auto;
margin-left: auto;
}
1.- Que la imágen dentro de la etiqueta azúl esté centrada.
2.- Que el texto en la etiqueta de color verde tenga un fondo de cualquier color (el mismo amarillo) pero que solo ocupe el tamaño del text. Esto lo he intentado con
display: inline; pero el problema es que luego no se me centra en la página.
Si alguien me puede dar una ayuda estaría muy muy agradecido, ya que llevo 2 noches sin poder hacer lo que busco, y me siento realmente frustrado.
Muchas gracias de antemano y un abrazo desde Venezuela.