Horizontal Mitte und unten Position Bild in einem div

-3

Neuer Kerl hier. Ich habe gesucht und ähnliche Probleme gefunden, aber nicht genau, wonach ich suche.Horizontal Mitte und unten Position Bild in einem div

Ich möchte einfach wissen, wie man ein Bild innerhalb eines div horizontal zentriert, aber auch das Bild an der Unterseite des div (20px oder so von unten, um genau zu sein).

kann ich Art bekommen von den Look Ich bin nach durch den Container div als position:relative Einstellung, und das Bild position:absolute, mit bottom:30px und margin-left: 49%. Ich würde es lieber genau machen, anstatt den linken Rand zu benutzen. Der Container muss relativ zu anderen Elementen sein, die ich auf der Seite habe.

Jede Hilfe wird sehr geschätzt. Vielen Dank.

Quelle

2016-10-13 Colin Stewart

Könnten Sie tatsächlich verwandten Code veröffentlichen? :/ –

Ich dachte, ich erklärte es ganz klar, ich dachte nicht, dass es obligatorisch wäre. Ist es? Wenn ja, werde ich in Zukunft darauf achten. Wenn meine Frage rein aus diesem Grund abgelehnt wurde, bin ich ziemlich überrascht. –

Zu oft wird eine Frage beantwortet und dann kommt das Poster zurück und sagt: "Oh, mein Markup ist anders als das!" – Rob

horizontal Mitte und vertikal unten div Click here

.parent { 
    position: relative; 
} 

.img { 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

Quelle

2016-10-13 12:45:31

Danke! Arbeitete perfekt. Ich habe das schon mal versucht (Rand: 0 auto) aber ohne links und rechts. Was genau macht das? –

@ColinStewart Um horizontal zu zentrieren verwenden wir margin: 0 auto; aber wir positionieren es. und wenn wir irgendein Element positionieren, wird es automatisch von links beginnen: 0; Also, um es in den Mittelpunkt zu stellen, links: 0; rechts: 0; . Wenn es für dich funktioniert hat, hast du es aufgewertet. –

Okay, großartig. Ich verstehe jetzt. Vielen Dank. Ich habe aufgewertet, aber glaube nicht, dass es sich zeigt, da ich brandneu bin. Auch als Antworten akzeptiert. –

Zentren die absolute Bild im Inneren des relativ div

div > img { 
    left: 50%; 
    transform: translateX(-50%); 
}

Quelle

2016-10-13 12:40:22 Barry127

Vielen Dank für die Antwort, es hat fast funktioniert, war aber nicht ganz zentriert (etwas nach rechts). –

Alternativ können Sie left/right auf Null und Setzen des Links/Rechts kombinieren Einstellung margin bis auto:

.box { 
    position: relative; 
} 

.box img { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 2em; 
    margin: 0 auto; 
}

Demo: https://jsfiddle.net/ffyof90e/

Erläuterung: Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?

Quelle

2016-10-13 12:58:00 paulflakstad

es so tun, zum Beispiel:

div > img { 
    display:block; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 

} 

#divid{ 
    position: relative; 
    height: 300px; 
    width: 300px; 
    border: 3px solid #73AD21; 
}

Sie können prüfen:

<div id="divid"> 
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42"> 
</div>

Sie jetzt css wie diese anwenden können es bei https://jsfiddle.net/n4528wxz/1/

Quelle

2016-10-13 13:03:55 Rocky2014

Horizontal Mitte und unten Position Bild in einem div

Antwort

Verwandte Themen