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

Question

Comment est-ce que je peux centrer une image horizontalement et alignée au fond du récipient en même temps?

J'ai pu centrer l'image horizontalement par elle-même. J'ai également été en mesure d'aligner le fond du conteneur par son auto. Mais je n'ai pas été capable de 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 au fond de la div. Qu'est-ce que j'ai besoin d'ajouter/modifier pour que l'image soit centrée horizontalement à l'intérieur de la div? La taille de l'image n'est pas connue auparavant 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 absolument positionné sera par rapport au parent le plus proche qui a un positionnement non statique. Je suppose que vous êtes satisfait de la façon dont votre .image_block s'affiche, donc nous pouvons laisser le positionnement relatif là. En tant que tel, l'élément <a> sera positionné par rapport au .image_block, ce qui nous donnera l'alignement du bas. puis, nous text-align: center l'élément <a>, et lui donner une largeur de 100% de sorte qu'il est la taille de .image_block.

le <img> au sein de <a> sera ensuite centré de manière appropriée.

Answer 2

Supprimez la ligne position: relative;. Je ne suis pas sûr de savoir exactement pourquoi, mais ça le corrige pour moi.

Answer 3

ne serait pas

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

ajouté à la .image_block un img faire l'affaire?
Notez que cela ne fonctionne pas dans IE6 (peut-être pas sûr 7)
il vous devrez faire sur .image_block le conteneur Div

text-align:center; 

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

Answer 4

Avez-vous essayé:

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

Answer 5

C'est délicat; la raison pour laquelle il ne fonctionne pas est que vous ne pouvez pas positionner via la marge ou l'alignement de texte tout en étant positionné de manière absolue.

Si l'image est seul dans la div, je vous recommande quelque chose comme ceci:

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

Vous devrez peut-coller l'appel vertical-align sur l'image à la place; pas vraiment sûr sans le tester. Utiliser vertical-align et line-height va vous traiter beaucoup mieux, cependant, que d'essayer de vous tromper avec le positionnement absolu.

Answer 6

Cela fonctionne également (pris un soupçon de cette 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>