Centrar una imagén dentro de un DIV

gonza182 · #1 (**permalink**) 12/07/2014, 17:27

Buenas tardes a todos,

Tengo una duda, y los posts que encontre en el buscador, no me ayudaron a solucionarlo.

Estoy iniciando en el mundo del CSS, y me es imposible centrar una imagen con un border-radius 50%, no importa lo que haga, siempre me queda estatica, no importa si cambio los margin o lo que haga.

Paso el codigo a ver si alguién puede darme una mano.

HTML.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Menu efecto Hover</title>
    <link rel="stylesheet" type="text/css" href="index_style.css">
    
</head>
<body>
    <div id="home" class="container">
        <img id="icon" alt="" src="pictures/icon1.png">
    </div>
    <header> 
        
        <div class="contenedor" id="uno">
            <img class="icon" src="pictures/icon1.png">
            <p class="texto">Home</p>
        </div>
 
        <div class="contenedor" id="dos">
            <img class="icon" src="pictures/icon2.png">
            <p class="texto">Pagina</p>
        </div>
 
        <div class="contenedor" id="tres">
            <img class="icon" src="pictures/icon3.png">
            <p class="texto">Google</p>
        </div>
 
        <div class="contenedor" id="cuatro">
            <img class="icon" src="pictures/icon4.png">
            <p class="texto">Apple</p>
 
        </div>
 
        <div class="contenedor" id="cinco">
            <img class="icon" src="pictures/icon5.png">
            <p class="texto">HTML 5</p>
 
        </div>
 
        <div class="contenedor" id="seis">
            <img class="icon" src="pictures/icon6.png">
            <p class="texto">Correo</p>
 
        </div> 
    </header>
    
</body>
</html>

CSS

Código CSS:

Ver original*{
    margin: 0px;
    padding: 0px;
    font-family: Helvetica;
}
 
header{
    margin: auto;
    margin-top: 300px;
    margin-left: auto;
    width: 1200px;
    height: 230px;
    background-color: #f80808;
}
 
div.contenedor{
    width: 200px;
    height: 230px;
    float: left;
    -webkit-transition:height .4s; /*transicion, del DIV*/
    
}
 
div#uno{
    background-color: rgb(208,101,3);
}
 
div#dos{
    background-color: rgb(233,147,26);
}
 
div#tres{
    background-color: rgb(22,145,190);
}
 
div#cuatro{
    background-color: rgb(22,107,162);
}
 
div#cinco{
    background-color: rgb(27,54,71);
}
 
div#seis{
    background-color: rgb(21,40,54);
}
 
img.icon{
    display: block;
    margin: 50px auto;
    background-color: rgba(255,255,255,0.15);
    width: 40px;
    padding: 20px;
    -webkit-border-radius: 50%;
    -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0); /*sombra de los iconos*/
    -webkit-transition:box-shadow .4s;
    
 
}
p.texto{
    font-size: 1.2em;
    color:white;
    text-align: center;
    padding-top:10px; 
    opacity: .6;
    -webkit-transition:padding-top .4s;
 
 
}
 
div.contenedor:hover{
    height:250px;
}
 
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);
}
body {
    background-color: #ccc;
}
 
div#home{
    background-color: #FF5E3A;
}
 
div.container{
    width: 200px;
    height: 200px;
    border-radius: 50%;
 
}
#icono{
    display: block;
    margin: auto;
}

Alguno me podría explicar adonde me equivoque?

gracias!

Zeromm · #2 (**permalink**) 13/07/2014, 03:09

En el .container no le estás marcando de ninguna forma que se centre. Añadele un margin: 0 auto; y "voilá"

Por cierto, no hace falta que pongas "div" delante de cada clase o id.

pzin · #3 (**permalink**) 13/07/2014, 07:31

Cita:

Iniciado por Zeromm

Por cierto, no hace falta que pongas "div" delante de cada clase o id.

Aunque es una buena costumbre y cuando son clases a veces si hace falta.

Zeromm · #4 (**permalink**) 13/07/2014, 07:46

Cita:

Iniciado por pzin

Aunque es una buena costumbre y cuando son clases a veces si hace falta.

No estoy del todo de acuerdo en que sea buena costumbre, ya que si se usa en casos inecesarios al hacerlo por costumbre solo se conseguirá aumentar el tamaño del css de manera innecesaria.

Y en su código no hacen falta ya que solo tiene capas, y si va a hacer una web con un código como ese, no es una buena optimización. En cambio si trabaja con un etiquetado semantico más amplio, si puede (y digo puede... no digo que sea fundamental) llegar a hacer falta en algún caso muy concreto, pero no en todos.

pzin · #5 (**permalink**) 13/07/2014, 09:03

Cita:

Iniciado por Zeromm

[...]solo se conseguirá aumentar el tamaño del css de manera innecesaria.

No sólo se conseguiría aumentar el tamaño del CSS, sino claridad en el código para uno mismo y para quien venga.
Respecto al tamaño… Un caracter suele (en este caso lo es) ser un byte de información, entonces necesitas tener 1024 caracteres para alcanzar un solo kilobyte, luego una burrada de selectores para que tenga algún alcance importante y más aún para que ralentice.

128 bytes:

Código CSS:

Ver original#global {
  position: relative;
  margin: 20px;
  height: 20%;
  width: 100px;
  color: blue;
  white-space: nowrap;
}

131 bytes:

Código CSS:

Ver originaldiv#global {
  position: relative;
  margin: 20px;
  height: 20%;
  width: 100px;
  color: blue;
  white-space: nowrap;
}

Minificando un archivo ganas mucho más que dejando una etiqueta fuera.

94bytes:

Código CSS:

Ver originaldiv#global{position:relative;margin:20px;height:20%;width:100px;color:blue;white-space:nowrap;}

En Windows la diferencia entre minificar o no debería de ser incluso más.

Zeromm · #6 (**permalink**) 13/07/2014, 09:35

Por eso digo, que si no es necesario... ¿porque añadir esos bytes de más?

Repito, en la gran mayoria de casos no es necesario, en determinados casos si puede serlo, como para cambiar la clase de un elemento de forma dinámica, pero si en la mayoria de casos no es necesario y menos con "ids" que se supone que son únicos... ¿porque añadir peso inecesario a la web?

Y el tema de realentizar la web. No solo es el peso del css, si no que poniendole un div delante a todos los selectorers estás haciendo que el navegador tarde más en leer esos estilos, porque entre todo el html va a estar buscando un id o una clase que tenga delante un div, y si tiene que hacer eso en un código de 1000 lineas, al final si se nota.

Y el tema de la claridad para uno mismo y los demás. ¿entonces para que tenemos los comentarios? xD. Es más, de echo si usas algún preprocesador es perfecto porque los comentarios no se añadiran al css final y tendrás un archivo css totalmente claro para otro desarrollador (en el preprocesador) y mas ligero en el archivo final

pzin · #7 (**permalink**) 13/07/2014, 10:25

Zeromm hay mucha leyenda urbana con el tema de la optimización y lo que tarda o no en renderizar el motor del navegador; pon un ejemplo de código donde esto que comentamos haga denotar alguna diferencia perceptiva y verás que la cantidad necesaria de lineas es casi absurda para cualquier sitio web.

Zeromm · #8 (**permalink**) 13/07/2014, 10:31

Bueno, pongo el link de la web de mozilla "developer.mozilla.org", que algo de esto saben, en el que confirman que "no es correcto" poner el nombre de una etiqueta delante de un id por ejemplo.

pzin · #9 (**permalink**) 13/07/2014, 12:11

Bueno, eso ya es otra cuestión. Ahí cualquiera puede escribir y seguir agrandando esas leyendas.

Zeromm · #10 (**permalink**) 13/07/2014, 12:27

ya ya... la web de desarrollo de mozilla es tan poco fiable para el css como la de "escriboelcssconlalengua.com", ¿no?

gonza182 · #11 (**permalink**) 14/07/2014, 20:48

Muchas gracias a todos!