Diskuze: flexbox zacentrování popisku a obrázku v 1 bloku/banneru

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

joshiko

Člen

joshiko:15.3.2018 14:41

ahoj, jsem amatér. snažím se v kostce produktu (viz obrázek) zacentrovat obrázek na výšku na střed nebo na spodek. vyzkoušel jsem snad všechny kombinace z www.vzhurudolu.cz/…css3-flexbox ruzne obaloval divy i bez divu, ale proste s tím nehnu. posílám poslední verzi. Moc dík za pomoc.

<H2>Hadicové spony šnekové</H2>
<div class=kostky>
<A href='/.../'><div class=vkosti><div>W1 pozink</div><div><img src='...'></div></div></A>
</div>

.kostky {padding-bottom:30px;display:flex;flex-flow:row wrap}

.kostky A {BORDER: #ddd 1px solid;height:7rem;width:7rem;MARGIN:3px;display:block;TEXT-ALIGN:center;overflow:hidden}

.vkosti {display:flex;flex-flow:column wrap;align-items:center;align-content:space-around}

Odpovědět

15.3.2018 14:41

Šimon Rataj

Člen

Šimon Rataj:15.3.2018 14:49

https://stackoverflow.com/…0398/6113539
http://jsfiddle.net/…/4RPFa/4570/

Editováno 15.3.2018 14:50

Nahoru Odpovědět

15.3.2018 14:49

Šimon Rataj

Člen

Šimon Rataj:28.3.2018 19:26

Jestli chceš na spodek, tak změň vertical-align: middle na vertical-align: bottom i u .helper i u img.

Nahoru Odpovědět

28.3.2018 19:26

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.