Horizontálne zobrazenie strednej a dolnej pozície v rozdelení obrazu, css, obrazu, polohovania

Nový muž tu. Hľadal som a našiel podobné problémy, ale nie presne to, po čom som.

Chcem len vedieť, ako vodorovne vystrediť obrázok v rámci prvku div, ale tiež ho umiestniť na spodok prvku div (presnejšie 20 pixlov od zdola).

Môžem nejako získať vzhľad, po ktorom som nastavil kontajner div ako position:relativea obrázok position:absolute, s bottom:30px a margin-left: 49%, Radšej by som to bol skôr presný ako použitie ľavého okraja. Pre ostatné prvky, ktoré mám na stránke, musí byť kontajner relatívny.

Akákoľvek pomoc sa veľmi ocení. Vďaka.

odpovede:

0 pre odpoveď č. 1

Vodorovne stred a zvislo spodný dielKliknite tu

.parent {
position: relative;
}

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

---

0 pre odpoveď č. 2

centruje absolútny obraz vo vnútri relatívnej div

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

---

0 pre odpoveď č. 3

Prípadne môžete kombinovať nastavenie left/right na nulu a nastavenie doľava / doprava margin na auto:

.box {
position: relative;
}

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

demo: https://jsfiddle.net/ffyof90e/

vysvetlenie: Prečo je „pozícia: absolútna; vľavo: 0; vpravo: 0; šírka: XYpx; okraj: 0 auto“ skutočne centrovaná?

---

0 pre odpoveď č. 4

Urobte to takto, napríklad:

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

Teraz môžete použiť aplikáciu css takto:

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;
}

Môžete to skontrolovať na stránke https://jsfiddle.net/n4528wxz/1/

---