Wie zentriert man ein Bild horizontal und richtet es auf den Boden des Behälters aus?

Question

Wie kann ich ein Bild horizontal zentrieren und gleichzeitig zum Boden des Behälters ausrichten?

Ich konnte das Bild horizontal von selbst zentrieren. Ich war auch in der Lage, den Boden des Behälters selbst auszurichten. Aber ich war nicht in der Lage, beides gleichzeitig zu tun.

Hier ist, was ich habe:

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

Dieser Code das Bild an den unteren Rand des div ausrichtet. Was muss ich hinzufügen/ändern, um das Bild auch horizontal innerhalb des div zu zentrieren? Die Bildgröße ist vorher nicht bekannt, wird aber 175x175 oder weniger betragen.

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

Erklärung: ein Element absolut positioniert wird dem nächsten übergeordneten relativ sein, die eine nicht-statische Positionierung aufweist. Ich nehme an, Sie sind glücklich mit, wie Ihre .image_block zeigt, so dass wir die relative Positionierung dort lassen können.

als solches wird das <a> Element relativ zum .image_block positioniert, was uns die untere Ausrichtung gibt. dann, wir text-align: center das <a> Element, und geben Sie ihm eine 100% Breite, so dass es die Größe .image_block ist.

wird die innerhalb <a> dann entsprechend zentriert.

Answer 2

Entfernen Sie die position: relative; Linie. Ich weiß nicht genau warum, aber es behebt es für mich.

Answer 3

nicht

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

hinzugefügt, um die .image_block ein img den Trick?
Beachten Sie, dass das nicht zu in IE6 (vielleicht 7 nicht sicher)
dort müssen Sie tun auf .image_block den Container Div

text-align:center; 

position:relative; ein Problem sein könnte funktionieren.

Answer 4

haben Sie versucht:

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

Answer 5

Diese heikel ist; Der Grund dafür ist, dass Sie nicht per Rand oder Text ausrichten können, während Sie absolut positioniert sind.

Wenn das Bild allein in der div ist, dann empfehle ich etwas wie folgt aus:

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

Sie müssen stattdessen die vertical-align Anruf auf dem Bild bleiben; nicht wirklich sicher, ohne es zu testen. Die Verwendung von vertical-align und line-height wird Sie jedoch viel besser behandeln als die absolute Positionierung.

Answer 6

Dies funktioniert auch (einen Hinweis aus diesem question genommen)

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