Mi div contenedor no centra

silmasur · #1 (**permalink**) 08/09/2014, 12:05

Tengo un div contenedor y no me centra. Este el es cod

Código HTML:

Ver original<!doctype html>
 
<html lang="es">
 
    <head>
            <title> Prueba</title>
            <meta charset="utf-8"/>
            <link rel="stylesheet" href="prueba.css">
            
                
    </head>    
        <body bgcolor="#2f4544" id="body">    
            
            <center><img src="fondo.jpg"></center>    
            <div id="header"></div>
 
        <div class="contenedor" id="uno">
            <a href="NewProject.html"><img class="icon" src="imagen/home.png"></a>
            <p class="texto">Inicio</p>
        </div>
 
        <div class="contenedor" id="dos">
            <a href="compania.html"><img class="icon" src="imagen/compania.png"></a>
            <p class="texto">Nuestra Compañía</p>
        </div>
 
        <div class="contenedor" id="tres">
            <a href="productos.html"><img class="icon" src="imagen/productos2.png"></a>
            <p class="texto">Productos</p>
        </div>
 
        <div class="contenedor" id="cuatro">
            <a href="promo.html"><img class="icon" src="imagen/promo.png"></a>
            <p class="texto">Promo del Mes</p>
        </div>
 
        <div class="contenedor" id="cinco">
            <a href="clientes.html"><img class="icon" src="imagen/clientes2.png"></a>
            <p class="texto">Clientes</p>
        </div>
        
        <div class="contenedor" id="seis">
            <a href="contacto.html"><img class="icon" src="imagen/contactos.png"></a>
            <p class="texto">Contacto</p>
        </div>
 
    </header>
 
</body>    
 
</html>

Código CSS:

Ver original*{
margin:0px;
padding:0px;
font-family: arial;            
color:white
}        
 
#header{
    margin:0px auto;
    width:960px;
    height:180px;
    background-color: rgb(14, 161, 156);
    
}
 
div.contenedor{
    margin:0px;
    width:160px;
    height: 180px;
    float:left;
    -webkit-transition: height .4s;
    -webkit-box-shadow: 4px 4px 7px 1px  #191d1c;
    
}
 
div#uno{
    background-color: rgb(10, 115, 111);
    
}
 
div#dos{
    background-color: rgb(12, 138, 133);
    
}
 
div#tres{
    background-color: rgb(14, 161, 156);
    }
 
 
div#cuatro{
    background-color: rgb(16, 184, 178);
    
}
 
div#cinco{
    background-color: rgb(18, 207, 200);
    
}
 
div#seis{
    background-color: rgb(40, 235, 228); 
 
}
 
 
img.icon{
    display: block;
    margin:30px auto;
    background-color: rgba(255,255,255,.15);
    width:40px;
    padding:20px;
    -webkit-border-radius: 50%;
    -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
    -webkit-transition:box-shadow .4s;
}
 
p.texto{
    font-size: 3;
    color:white;
    text-align: center;
    padding-top:0px;
    opacity: .9;
    -webkit-transition: padding-top .4s;
    font-family: arial;
}
 
p.historia{
    font-size: 3;
    color:white;
    text-align: justify;
    padding-top:0px;
    opacity: .9;
    -webkit-transition: padding-top .4s;
    font-family: verdana;
 
}
 
 
div.contenedor:hover{
    height:200px;
}
 
div.contenedor:hover p.texto{
    padding-top: 30px;
    opacity: 1;
}
 
div.contenedor:hover img.icon{
    -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,.6);
}

ViktorAld · #2 (**permalink**) 08/09/2014, 18:41

Saludos, una opción seria usar dentro de la etiqueta div la palabra align seguido del signo igual y darle la propiedad de center. El ejemplo seria asi: <div align="center">Tu código </div>

Tu etiqueta <center></center> solo actúa sobre tu imagen

Ojala te sirva amigo

webosiris · #3 (**permalink**) 08/09/2014, 22:38

Cita:

Iniciado por ViktorAld

Saludos, una opción seria usar dentro de la etiqueta div la palabra align seguido del signo igual y darle la propiedad de center. El ejemplo seria asi: <div align="center">Tu código </div>

nada de eso

eso es html viejo y despreciado. TODO lo visual se debe de hacer con CSS.

silmasur, para empezar tu html está mal. <center> no existe en HTML 5. Tampoco existe bgcolor y tienes un </header> pero no veo que lo hayas abierto por ningún lado... si quieres que las cosas funcionen bien, empieza por escribir html válido.

Y tu dices que quieres centrar el contenedor, pero tus .contenedor están flotados a la izquierda... nunca en la vida se van a centrar. Si quieres centrarlos elimina el float:left y pon margin:auto;

ruizinho · #4 (**permalink**) 03/10/2014, 05:59

Hola, como te ha dicho el compañero, olvídate de introducir estilos en el html, crea un archivo css y lo metes todo ahi.

Para que te centre un div tan solo tienes que darle un margin-right y margin-left auto.

De todas formas, no entiendo muy bien lo que has hecho con la imagen esa que se llama fondo, si lo que pretendías era ponerla de fondo en el body o en un div, tan solo tienes que ponerlo en el archivo css background-image: url()