Centrar una imagen dentro de un div

Ya he configurado el borde de una imagen dentro de un div para que no sea ninguno. Ahora quiero centrar esa imagen dentro de su div que contiene. He intentado usar el margin: 0 auto; pero eso no funcionó.Centrar una imagen dentro de un div

Estoy seguro de que estoy pasando por alto algo estúpido, pero me gustaría contar con la ayuda de la comunidad stackoverflow para que esto no me tome una hora de mirar la pantalla para averiguarlo. Muchas gracias.

<body> 
    <div id="wrapper"> 
     <div id="banner"> 

      <img src="logo3.png"/> 
      <!--<img src="kslf_logo.png"/> 
      <img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>--> 


      <div id="social_network"> 
       <a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a> 
      </div> 

     </div> 
    </div> 
</body>

Aquí es el CSS ...

#banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

#banner img { 
    border: none; 
    margin: 0 auto; 
}

Fuente

2010-01-25 Dan

intente configurar la propiedad de la imagen a displayblock:

banner { 
    height: 100px; 
    width: 960px; 
    padding-bottom: 10px; 
} 

banner img { 
    border: none; 
    display: block; 
    margin: 0 auto; 
}

Fuente

2010-01-25 17:55:15

bingo, gracias hombre! – Dan

Eres bienvenido, es algo de CSS no obvio. –

horizontal: sólo tratar

text-align:center;

Fuente

2010-01-25 17:53:06 roman

Por alguna razón no me he acostumbrado a publicar HTML aquí sin que lo rasguen como una página, lo siento, pero creo que esta solución solo funciona en IE, y no funciona en este caso de todos modos, ¿hay una forma compatible con navegador cruzado para hacerlo? – Dan

@Dan: se arregló. Tienes que intentar cada código por cuatro espacios. –

De cualquier

banner { 
    height:100px; 
    text-align:center; 
    width:960px; 
    padding-bottom:10px;}

o si la img es de un tamaño específico, entonces

banner img { 
     display:block; 
     width: <somevalue>px; 
     border:none; 
     margin:0 auto; 
     }

funcionará ..

Fuente

2010-01-25 17:53:50

Creo que es justo margin: auto;. No se necesita cero.

Fuente

2010-01-25 17:53:57 Hunter

Aplicando text-align: center a su banner div se centrará en sus hijos en línea y en bloque en línea (que abarca la etiqueta img).

La razón por la cual su código no funcionaba es porque margin: 0 auto solo centrará los elementos del bloque.

Fuente

2010-01-25 17:54:44 nickelleon

Después de muchos intentos exhaustivos para centrar alinear una imagen en un div (vertical y/u horizontal), entendí lo siguiente.
Para alinear verticalmente el centro alinee una imagen en un div.

.div { 
display:flex; 
justify-content:center 
}

Para horizontal Centro alinear una imagen en un div.

.div { 
display:flex; 
align-items:center; 
}

Para centrar tanto vertical como horizontalmente una imagen en un div, hay 2 opciones (1)

div { 
display:flex; 
align-item:center; 
justify-content:center; 
}

(2)

.div { 
display:flex 
} 

.div > img { 
margin: auto 
}

Por favor, hágamelo saber si esto no funciona en ninguna situación.

Fuente

2016-03-30 14:27:46 Malathy

Centrar una imagen dentro de un div

Respuesta

Cuestiones relacionadas