¿Cómo centrar una imagen horizontalmente y alinearla en la parte inferior del contenedor?

Question

¿Cómo puedo centrar una imagen horizontalmente y alinearme al fondo del contenedor al mismo tiempo?

He podido centrar la imagen horizontalmente por sí mismo. También he podido alinear el fondo del contenedor por sí mismo. Pero no he podido hacer ambas cosas al mismo tiempo.

Aquí es lo que tengo:

.image_block { 
    width: 175px; 
    height: 175px; 
    position: relative; 
    margin: 0 auto; 
} 
.image_block a img { 
position: absolute; 
bottom: 0; 
} 

<div class="image_block"> 
    <a href="..."><img src="..." border="0"></a> 
</div> 

Ese código se alinea la imagen a la parte inferior de la div. ¿Qué necesito agregar/cambiar para que también centre la imagen horizontalmente dentro del div? El tamaño de la imagen no se conoce de antemano, pero será de 175x175 o menos.

Answer 1

.image_block { 
    width: 175px; 
    height: 175px; 
    position: relative; 
} 

.image_block a { 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    bottom: 0px; 
} 

.image_block img { 
/* nothing specific */ 
} 

explicación: un elemento posicionado absolutamente será relativa al padre más cercano que tiene un posicionamiento no estático. Supongo que está satisfecho con la forma en que se muestra su .image_block, por lo que podemos dejar el posicionamiento relativo allí.

como tal, el elemento <a> se colocará en relación con el .image_block, que nos dará la alineación inferior. entonces, tenemos text-align: center el elemento <a>, y le damos un ancho del 100% para que tenga el tamaño de .image_block.

el <img> dentro de <a> se centrará adecuadamente.

Answer 2

Quite la línea position: relative;. No estoy seguro de por qué exactamente pero me lo arregla.

Answer 3

no habría

margin-left:auto; 
margin-right:auto; 

añadido a la .image_block un img hacer el truco?
Tenga en cuenta que esto no funciona en IE6 (quizás 7 no estoy seguro)
allí se tendrá que hacer en el contenedor .image_block Div

text-align:center; 

position:relative; podría ser un problema también.

Answer 4

has necesitado:

.image_block{ 
text-align: center; 
vertical-align: bottom; 
} 

Answer 5

Esto es complicado; la razón por la que está fallando es que no puede colocarse a través de un margen o alinear texto mientras esté absolutamente posicionado.

Si la imagen es el único en el div, entonces me recomiendan algo como esto:

.image_block { 
    width: 175px; 
    height: 175px; 
    line-height: 175px; 
    text-align: center; 
    vertical-align: bottom; 
} 

Es posible que necesite para pegar la llamada vertical-align en la imagen en su lugar; no estoy seguro sin probarlo. Usar vertical-align y line-height te va a tratar mucho mejor, sin embargo, que tratar de perder el tiempo con el posicionamiento absoluto.

Answer 6

Esto también funciona (tomada una pista de esta question)

.image_block { 
    height: 175px; 
    width:175px; 
    position:relative; 
} 
.image_block a img{ 
margin:auto; /* Required */ 
position:absolute; /* Required */ 
bottom:0; /* Aligns at the bottom */ 
left:0;right:0; /* Aligns horizontal center */ 
max-height:100%; /* images bigger than 175 px */ 
max-width:100%; /* will be shrinked to size */ 
} 

Answer 7

#header2 
{ 
    display: table-cell; 
    vertical-align: bottom; 
    background-color:Red; 
} 


<div style="text-align:center; height:300px; width:50%;" id="header2"> 
<div class="right" id="header-content2"> 
    <p>this is a test</p> 
</div> 
</div>