web-dev-qa-db-fra.com

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

Comment centrer une image horizontalement et alignée au fond du conteneur en même temps? 

J'ai pu centrer l'image horizontalement par elle-même. J'ai également été capable d'aligner le fond du conteneur par lui-même. 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 bas de la div. Que dois-je ajouter/modifier pour que l'image soit également centrée horizontalement dans le div? La taille de l’image n’est pas connue à l’avance mais elle sera au minimum de 175x175.

csspositioning
39
Echo
.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 ayant un positionnement non statique. Je suppose que vous êtes satisfait de l’affichage de votre .image_block afin que nous puissions y laisser le positionnement relatif.

en tant que tel, l'élément <a> sera positionné par rapport au .image_block, ce qui nous donnera l'alignement inférieur. ensuite, nous text-align: center l'élément <a> et lui donnons une largeur de 100% de sorte qu'il ait la taille de .image_block.

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

65
Owen

Cela fonctionne aussi (pris un indice 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 */ 
}
17
vdua

ne serait pas

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

ajouté au .image_block a img faire le tour?
Notez que cela ne fonctionnera pas dans IE6 (peut-être 7 pas sûr)
Là vous devrez faire sur .image_block le conteneur Div

text-align:center;

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

3
Pim Jager

C'est délicat. la raison pour laquelle cela échoue est que vous ne pouvez pas positionner via une marge ou un alignement de texte en position absolue.

Si l'image est seule dans la div, alors 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 l'appel vertical-align sur l'image à la place; pas vraiment sûr sans le tester. Utiliser vertical-align et line-height vous traitera beaucoup mieux, cependant, que d'essayer de perdre son temps avec le positionnement absolu.

3
One Crayon

Supprimez la ligne position: relative;. Je ne sais pas trop pourquoi, mais ça résout le problème pour moi.

0
Jeremy Ruten

as-tu essayé:

.image_block{
text-align: center;
vertical-align: bottom;
}
0
workmad3
#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>
0
dfortun