it-swarm.com.de

Wie zentriert man ein Bild horizontal und richtet es an der Unterseite des Containers aus?

Wie kann ich ein Bild horizontal zentrieren und gleichzeitig auf den Boden des Containers ausrichten? 

Ich konnte das Bild horizontal von selbst aus zentrieren. Ich konnte den Boden des Containers auch von selbst ausrichten. Beides konnte ich nicht gleichzeitig tun. 

Folgendes habe ich:

.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 richtet das Bild am unteren Rand des div aus. Was muss ich hinzufügen/ändern, damit das Bild auch horizontal im div zentriert wird? Die Bildgröße ist vorab nicht bekannt, beträgt jedoch höchstens 175 x 175.

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

Erklärung : Ein absolut positioniertes Element ist relativ zum nächstgelegenen übergeordneten Element, das nicht statisch positioniert ist. Ich gehe davon aus, dass Sie mit der Darstellung Ihres .image_block zufrieden sind, sodass wir die relative Positionierung dort belassen können.

daher wird das <a>-Element relativ zum .image_block positioniert, wodurch die untere Ausrichtung erhalten wird. Dann text-align: center das <a>-Element, und geben Sie ihm eine Breite von 100%, damit es die Größe von .image_block hat.

der <img> in <a> wird dann entsprechend zentriert.

65
Owen

Das funktioniert auch (genommen einen Hinweis aus dieser Frage )

.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

würde nicht

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

dem .image_block ein img hinzugefügt?
Beachten Sie, dass dies in IE6 nicht funktioniert (vielleicht 7 nicht sicher).
dort müssen Sie auf .image_block den Container Div

text-align:center;

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

3
Pim Jager

Das ist knifflig; Der Grund dafür ist, dass Sie nicht über einen Rand oder Textausrichtung positionieren können, während Sie absolut positioniert sind.

Wenn das Bild alleine im div ist, empfehle ich Folgendes:

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

Möglicherweise müssen Sie stattdessen den Aufruf vertical-align auf dem Bild festhalten. nicht wirklich sicher, ohne es zu testen. Die Verwendung von vertical-align und line-height wird Sie jedoch viel besser behandeln, als mit absoluter Positionierung herumzuspielen.

3
One Crayon

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

0
Jeremy Ruten

hast du es versucht:

.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