Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Centrar section con imagen centrada

Estas en el tema de Centrar section con imagen centrada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/04/2014, 14:06
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 11 meses
Puntos: 6
Centrar section con imagen centrada

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;
}
En resúmen ¿que necesito?:

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.
  #2 (permalink)  
Antiguo 23/04/2014, 14:55
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 10 años, 9 meses
Puntos: 32
Respuesta: Centrar section con imagen centrada

1.- colocar al section padre de la imagen text-align:center
2.- no se a que texto te refieres pero el problema debe ser con que no debes ponerle inline, sino inline-block
  #3 (permalink)  
Antiguo 23/04/2014, 17:35
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 9 años, 11 meses
Puntos: 6
Respuesta: Centrar section con imagen centrada

@andresgarciadev: Muchas gracias por tu respuesta, definitivamente necesitaba el text-align:center.

Sobre la segunda duda, ya solucioné, y voy a explicarlo por aquí en caso de que alguien más desée hacerlo.

La idea era colocar el texto que aparece en la sección de color verde, en el centro de la pantalla, con el background justo del tamaño del texto, ni más ni menos ancho. El display: inline; convierte a la sección en línea y permite a la etiqueta contenedora adaptarse al tamaño del texto sin que los elementos alrededor se alinean con el elemento mencionado. Para poder centrarlo tuve que envolver la etiqueta de fondo verde con un <section>, y a este último aplicarle la propiedad CSS text-align: center.

Nuevamente muchísimas gracias por tu valiosa colaboración, me has sacado de unapuro tremendo. Saldudos!

Etiquetas: background, centrada, color, hover, html, página, section, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:04.