texto - centrar input css

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

Esto 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 alinea la imagen en 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

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

Answer 2

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 está sola en el div, entonces recomiendo algo como esto:

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

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

Answer 3

has probado:

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

Answer 4

.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 colocado absolutamente será relativo al padre más cercano que tiene un posicionamiento no estático. .image_block que está satisfecho con la visualización de .image_block , por lo que podemos dejar el posicionamiento relativo allí.

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

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

Answer 5

#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>

Answer 6

Esto también funciona (tomado 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 7

no lo haría

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

agregado al .image_block img hace el truco?
Tenga en cuenta que eso no funcionará en IE6 (tal vez 7 no estoy seguro)
allí deberás hacer en .image_block el contenedor Div

text-align:center;

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