centrado

[fersosa]

buenas! me está sucediendo algo extraño, supuestamente fácil de resolver, pero supongo que entreverado entre tanto código no logro darme cuenta.
quiero centrar el div que contiene otros cuatro. (tapanarrativa)
dejo códigos

Código HTML:

<!-- SECCION CONTENIDO -->
<div id="contenido">
 
 
  <div id="content">
   <fieldset id="desc">
    <legend><font color = "white">Narrativa</font></legend>
    
        <div id="seccionnarrativa"> 
        
        <div id="tapanarrativa">
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/elsilenciodelospajaros.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/elsilenciotapa.jpg" align="left"/></a>
                </div>
            
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/fabril.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/fabriltapa.jpg" align="left"/></a>
                </div>
            
            <div class="box2"><a href="http://www.forosdelweb.com/f53/horacio/invenciontardia.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/invenciontardiatapa.jpg" align="left"/></a>
                </div>
            
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/osodetrapo.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/osodetrapotapa.jpg" align="left"/></a>
                </div>
                </div>
           
         
           
    </div>
    
   </fieldset>
  </div>
    </div>
 
    
</div>   
    
</body>
</html>
 

Código CSS:

#tapanarrativa {
  margin: 0 auto;
  text-align: center;
}
.boxnarrativa{
width:200px;
height:200px;
background:#999;
float:left;
border:1px solid #444;
}
.box2{
width:200px;
height:200px;
background:#999;
clear:left;
float:left;
border:1px solid #442;
}
 

[ArturoGallegos]

supongo que tapanarrativa si tiene un ancho definido, verdad?

[fersosa]

hola! si. estuve viendo un poco más. me acerco a centrarlo pero no del todo. y quiero hacerlo responsive. ah y saqué un div innecesario.

Código HTML:

<!-- SECCION CONTENIDO -->
<div id="contenido">
 
 
  <div id="content">
   <fieldset id="desc">
    <legend><font color = "white">Narrativa</font></legend>
    
        
        
        <div id="tapanarrativa">
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/elsilenciodelospajaros.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/elsilenciotapa.jpg" align="center"/></a>
                </div>
            
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/fabril.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/fabriltapa.jpg" align="center"/></a>
                </div>
            
            <div class="box2"><a href="http://www.forosdelweb.com/f53/horacio/invenciontardia.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/invenciontardiatapa.jpg" align="center"/></a>
                </div>
            
            <div class="boxnarrativa"><a href="http://www.forosdelweb.com/f53/horacio/osodetrapo.html"><img src="http://www.forosdelweb.com/f53/horacio/images/tapaslibros/narrativa/osodetrapotapa.jpg" align="center"/></a>
                </div>
                </div>
           
         
           
    
    
   </fieldset>
  </div>
    </div>
 
    
</div>
 

Código CSS:

#content {
    width: 100%;
}
#content img {
    width: 85%;
    padding: 1%;
}
#contenido {
    width: 100%;
    padding: 0%;
    float: left;
    margin-left: auto;
    margin-right: auto;
}
#textogeneral {
    text-align: justify;
    padding: 10px 10px 10px 10px;
}
#textocentrado {
    text-align: center;
    padding: 10px 10px 10px 10px;
}
#tapanarrativa {
      width:60%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
}
#narrativa {
    width:200px;
    height:200px;
    text-align: center;
    font: 200% Arial;
    word-wrap: break-word;
    white-space: nowrap;
}
.boxnarrativa{
width:250px;
height:350px;
background:#999;
float:left;
border:1px solid #444;
max-width:500px;
text-align: center;
}
 
.box2{
width:250px;
height:350px;
background:#999;
clear:left;
float:left;
border:1px solid #444;
max-width:500px;
text-align: center;
}
 

[fede5426]

Antes que nada, en #contenido el float left y los margenes automáticos no van a tener ningún efecto si el contenedor tiene un ancho de 100%, esos estilos están de más.

Si querés que los box estén uno al lado del otro, borra el clear left de .box2, eso hace que se posicione abajo y no al lado.. y creo que ya con eso quedan centrados.

[ArturoGallegos]

hoy me he tomado la molestia re probar tu código y me he encontrado con que tapanarrativa si esta centrado

si aplicas

Código CSS:

#tapanarrativa {
  background:red;overflow:hidden;
}
 

veras como tapanarrativa si esta mas que centrado, el problema es que los elementos de su interior están flotando, esos no los puedes centrar ni a mentadas.... lo que tendrías que hacer es una de estas opciones

1.- haz que estos ocupen siempre el 50% del ancho de tapanarrativa, de esta forma nunca te quedaras con espacio en blanco dando la sensación de que no esta centrado.

2.- ajusta tapanarativa al ancho de su contenido, es decir en lugar de porcentajes usa medidas absolutas.... recuerda que usar porcentajes no es sinónimo de responsive design.... para compensarlo puedes usar media queries

3.- deja de flotar los cuadros que están en el interior de tapa narrativa y en su contra parte usa display inline block, esto hara que se acomoden centradamente... aunque no siempre tendrás 2 elementos por linea.

[fersosa]

Hola! muchas gracias!
si, me di cuenta que los porcentajes no son sinónimos de responsive. suponía que si.
Estoy en el medio de estudiar responsive design y voy aprendiendo de a poco.
voy a seguir sus consejos.
gracias!