Cómo centrar una imagen en sentido horizontal y que se ajuste a la parte inferior del recipiente?

Question

¿Cómo puedo centro de una imagen horizontalmente y alineado a la parte inferior del contenedor al mismo tiempo?

He sido capaz de centrar la imagen horizontalmente por su auto.También he sido capaz de alinear la parte inferior del recipiente por su auto.Pero no he sido capaz de hacer las dos 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>

Que el código que se alinea la imagen a la parte inferior de la div.¿Qué necesito para agregar/cambiar de hacerlo también centrar la imagen horizontalmente dentro del div?El tamaño de la imagen no se conoce antes de la mano, pero no será 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á relativo al progenitor más cercano que tenga 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 text-align: center, lo que nos dará la alineación inferior. entonces, <img> el elemento <=>, y le damos un ancho del 100% para que sea del tamaño de <=>.

el <=> dentro de <=> se centrará adecuadamente.

Answer 2

Esto también funciona (tomado una pista de esta pregunta )

.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 3

Esto es complicado;la razón por la que no funciona es que usted no puede colocar a través de margen o text-align mientras que la posición absoluta.

Si la imagen es solo en el div, entonces te recomiendo algo como esto:

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

Usted puede necesitar el palo vertical-align llame a la imagen en su lugar;no realmente seguro, sin pruebas.El uso de vertical-align y line-height se va a tratar mucho mejor, sin embargo, que tratando de ensuciar alrededor con posicionamiento absoluto.

Answer 4

no

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

agregado a la .image_block a img hacer el truco?
Tenga en cuenta que eso no funcionará en IE6 (quizás 7 no está seguro)
allí tendrá que hacer en position:relative; el contenedor Div

text-align:center;

<=> también podría ser un problema.

Answer 5

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

Answer 6

has intentado:

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

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>