NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
tbartolen
Člen
Avatar
tbartolen:9.1.2017 21:36

Aloha, snažím se vycentrovat text na střed divu. Samozřejmě vertical-align nefunguje. Nevíte jak využít nějaký trik s tabulkou nebo něco podobného? Díky...
CSS:

.pokus  {
    float:left;
    margin: 10px;
    text-align:center;
        height: 50px;
        /*padding: 30px;*/
    background-color:blue;
    color:white;
    font-style:italic;
    font-weight: bold;
    width: 30%;
}
.pokus1 {
    float:left;
    margin: 10px;
    height: 50px;
        vertical-align: middle;
    /*padding: 30px;*/
    background-color:pink;
    font-style:italic;
    font-weight: bold;
    width: 30%;
}

.pokus a {
        display: block;
width: 100%;
height: 100%;
}


.pokus1 a {
        display: block;
width: 100%;
height: 100%;
}

a HTML:

<div class="pokus"><a href="http://www.xidonie.cz/category/kosmeticke-sluzby/">Kosmetické služby</a></div>
<div class="pokus1"><a href="http://www.xidonie.cz/category/masaze/">Masáže</a></div>
<div class="pokus"><a href="http://www.xidonie.cz/category/specialni-nabidky/">Speciální nabídky</a></div>
<div class="pokus1"><a href="http://www.xidonie.cz/category/cviceni/">Cvičení</a></div>
<div class="pokus"><a href="http://www.xidonie.cz/category/detoxikace-organismu/">Detoxikace Organismu</a></div>
<div class="pokus1"><a href="http://www.xidonie.cz/category/pedikura-a-manikura/">Pedikúra a manikúra</a></div>
<div class="pokus"><a href="http://www.xidonie.cz/category/ramisio/">Ramisio</a></div>
Odpovědět
9.1.2017 21:36
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:9.1.2017 22:06

Vyřešeno:

line-height: 50px;
Nahoru Odpovědět
9.1.2017 22:06
Navštiv www.fb.com/skkelticz
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:13.1.2017 11:03

Pozor na to, že pokud budeš mít v divu více řádků, nebude ti to fungovat. Na verikální centrování existuje několik "CSS hacků", ale nejmodernější a snad jediné opravdové řešení (pokud nepočítáme tabulky, které se na to ne vždy hodí) je flexbox.

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
13.1.2017 11:03
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:13.1.2017 12:03

Hlavně nefunguje vertical-align pro prvky, ktere maji float!! Jen pro jejich potomky

Na slozitejsi pozicovani je pak super display:flex

Editováno 13.1.2017 12:04
 
Nahoru Odpovědět
13.1.2017 12:03
Avatar
tbartolen
Člen
Avatar
Odpovídá na Honza Bittner
tbartolen:13.1.2017 16:30

A pokud jim dam display: flex tak bude fungovat vertical align? Díky..

Nahoru Odpovědět
13.1.2017 16:30
Navštiv www.fb.com/skkelticz
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:13.1.2017 18:58

Flex má vlastní CSS vlastnosti, konkrétně by mohlo fungovat něco jako

.element {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

Kde .element je rodičovský element.

Editováno 13.1.2017 18:59
Nahoru Odpovědět
13.1.2017 18:58
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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 6 zpráv z 6.