Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Jan Demel
Tvůrce
Avatar
Jan Demel:1.2.2014 13:02

Čus. Jak by se dalo vycentrovat span ve divu ? Gůglil jsem to no a ani jedna z možností, které mi tam psali nešla použít na můj příklad.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jan Demel</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Hammersmith+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="header">
            <span>Jan Demel</span>
        </div>
        <div id="container">
        </div>
    </body>
</html>

CSS

html{
    height:100%;
}

body{
    height:100%;
    padding:0;
    margin:0;
}

#header{
    width:100%;
    min-height:100%;
    background-color:#0066FF;
    text-align:center;
}

#header span{
    color:white;
    font-size:70px;
    font-family: 'Hammersmith One', sans-serif;
    line-height: 100%;
    display: inline-block;
    vertical-align: middle;
}
Odpovědět
1.2.2014 13:02
To co se zdá být nemožné, je vždy možné.
Avatar
Uživatel sítě
Tvůrce
Avatar
Uživatel sítě :1.2.2014 14:05

Tomu spanu musíš také určit velikost tedy:

#header span{
color:white;
font-size:70px;
font-family: 'Hammersmith One', sans-serif;
line-height: 100%;
display: inline-block;
vertical-align: middle;
width:100%;
text-align: center;
}

Editováno
Nahoru Odpovědět
1.2.2014 14:05
Chybami se člověk učí, běžte se učit jinam!
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Jan Demel:1.2.2014 18:23

No ono to ale pořád nefunguje :(
http://demel.mablog.eu/web/

Nahoru Odpovědět
1.2.2014 18:23
To co se zdá být nemožné, je vždy možné.
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Jan Demel
Uživatel sítě :1.2.2014 20:28

Já to vycentrované vidím.. Zkus smazat cache (ctrl+F5)

Nahoru Odpovědět
1.2.2014 20:28
Chybami se člověk učí, běžte se učit jinam!
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Jan Demel
Neaktivní uživatel:1.2.2014 20:44

přesně je to vprostřed

Nahoru Odpovědět
1.2.2014 20:44
Neaktivní uživatelský účet
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Jan Demel:2.2.2014 9:39

Opravdu to přesně v prostřed té stránky není :D Je to jenom jakoby vycentrované nahoře. Používám Chrome, máte někdo něco jiného ?

Nahoru Odpovědět
2.2.2014 9:39
To co se zdá být nemožné, je vždy možné.
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Jan Demel
Uživatel sítě :2.2.2014 11:48

Moje chyba, špatně jsem tě pochopil takže zkus toto:

#header {
width: 100%;
min-height: 100%;
background-color: #0066FF;
}

#header span {
color: white;
font-size: 70px;
font-family: 'Hammersmith One', sans-serif;
width: 100%;
text-align: center;
top: 50%;
position: absolute;
}

To už je na středu.. :D

Nahoru Odpovědět
2.2.2014 11:48
Chybami se člověk učí, běžte se učit jinam!
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Uživatel sítě :2.2.2014 11:49

U #header dej pryč zarovnání textu na střed, stačí když to bude jenom u toho spanu..

Nahoru Odpovědět
2.2.2014 11:49
Chybami se člověk učí, běžte se učit jinam!
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 8 zpráv z 8.