Comment centrer une image horizontalement et l'aligner sur le bas du conteneur ?

Question

Comment puis-je centrer une image horizontalement et l'aligner au bas du conteneur en même temps ?

J'ai réussi à centrer l'image horizontalement par elle-même. J'ai également pu aligner le bas du conteneur par lui-même. Mais je n'ai pas réussi à faire les deux en même temps.

Voici ce que j'ai :

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

Ce code aligne l'image en bas de la division. Que dois-je ajouter/modifier pour qu'il centre également l'image horizontalement à l'intérieur de la division ? La taille de l'image n'est pas connue à l'avance mais elle sera de 175x175 ou moins.

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  */
}

explication un élément positionné de manière absolue sera relatif au parent le plus proche dont le positionnement n'est pas statique. je suppose que vous êtes satisfait de la manière dont vos .image_block affiche, nous pouvons donc y laisser le positionnement relatif.

en tant que tel, le <a> sera positionné par rapport à l'élément .image_block ce qui nous donnera l'alignement du bas. ensuite, nous text-align: center el <a> et lui donner une largeur de 100% afin qu'il ait la taille de l'élément .image_block .

le site <img> sur <a> sera alors centré de manière appropriée.

Answer 2

Cela fonctionne également (en s'inspirant de ce qui suit). 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 3

Ne serait pas

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

ajouté au bloc .image_block un img fait l'affaire ?
Notez que cela ne fonctionnera pas dans IE6 (peut-être 7, je ne suis pas sûr).
là, vous devrez faire sur .image_block le conteneur Div

text-align:center;

position:relative ; pourrait aussi être un problème.

Answer 4

C'est délicat ; la raison pour laquelle cela échoue est que vous ne pouvez pas positionner par le biais de la marge ou de l'alignement du texte alors que vous êtes absolument positionné.

Si l'image est seule dans le div, je recommande quelque chose comme ceci :

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

Vous devrez peut-être coller le vertical-align sur l'image à la place ; je ne suis pas vraiment sûr sans l'avoir testé. Utilisation de vertical-align y line-height vous traitera cependant beaucoup mieux que d'essayer de jouer avec le positionnement absolu.

Answer 5

Retirer le position: relative; ligne. Je ne sais pas exactement pourquoi, mais ça règle le problème pour moi.